[flatpickr] Fix flatpickr calendar buttons

Author: rosier

assets/js/flatpicker.js

@@ -2,32 +2,14 @@ import 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import l10n from "flatpickr/dist/l10n";
 
-flatpickr.defaultConfig.animate = window.navigator.userAgent.indexOf('MSIE') === -1;
-let lang = document.documentElement.getAttribute('lang') || 'en';
+const lang = document.documentElement.getAttribute('lang') || 'en';
 const Locale = l10n[`${lang}`] || l10n.default;
 flatpickr.localize(Locale);
-const configs = {
-    standard: {
-        enableTime: true,
-        dateFormat: "Y-m-d H:i",
-        allowInput: true,
-        time_24hr: true,
-        defaultHour: 24,
-        parseDate: (datestr, format) => {
-            return flatpickr.parseDate(datestr, format);
-        },
-        formatDate: (date, format, locale) => {
-            return flatpickr.formatDate(date, format);
-        }
-    }
-};
 
-const flatpickrs = document.querySelectorAll(".flatpickr");
-for (let i = 0; i < flatpickrs.length; i++) {
-    let element = flatpickrs[i];
-    let configValue = configs[element.getAttribute("data-flatpickr-class")] || {};
-    // Overrides the default format with the one sent by data attribute
-    configValue.dateFormat = element.getAttribute("data-date-format") || 'Y-m-d H:i';
-    // ...and then initialize the flatpickr
-    flatpickr(element, configValue);
-}
+flatpickr(".flatpickr", {
+    allowInput: true,
+    dateFormat: "Y-m-d H:i",
+    enableTime: true,
+    time_24hr: true,
+    wrap: true
+});

src/Form/Type/DateTimePickerType.php

@@ -14,7 +14,6 @@
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
 use Symfony\Component\OptionsResolver\OptionsResolver;
-use function Symfony\Component\String\u;
 
 /**
  * Defines the custom form field type used to manipulate datetime values across
@@ -32,16 +31,12 @@ public function configureOptions(OptionsResolver $resolver): void
         $resolver->setDefaults([
             'widget' => 'single_text',
             'input' => 'datetime_immutable',
-            // if true, the browser will display the native date picker widget
+            // If true, the browser will display the native date picker widget
             // however, this app uses a custom JavaScript widget, so it must be set to false
             'html5' => false,
-            // adds a class that can be selected in JavaScript
+            // Add attributes for flatpickr usage that can be selected in JavaScript
             'attr' => [
-                'class' => 'flatpickr',
-                // Attributes for flatpickr usage
-                'data-flatpickr-class' => 'standard',
-                'data-date-locale' => u(\Locale::getDefault())->replace('_', '-')->lower(),
-                'data-date-format' => 'Y-m-d H:i',
+                'data-input' => 'data-input',
             ],
             'format' => 'yyyy-MM-dd HH:mm',
             'input_format' => 'Y-m-d H:i',

templates/form/fields.html.twig

@@ -8,23 +8,16 @@
 #}
 
 {% block date_time_picker_widget %}
-    <div class="input-group date">
+    <div class="input-group flatpickr">
         {{ block('datetime_widget') }}
-        <div class="input-group-append">
-            <button type="button" class="btn btn-outline-secondary">
-                <twig:ux:icon name="tabler:calendar-month" aria-hidden="false" aria-label="Pick a date"/>
-            </button>
-        </div>
+        <button class="btn btn-outline-secondary" data-toggle type="button"><twig:ux:icon name="tabler:calendar-month" /></button>
+        <button class="btn btn-outline-danger" data-clear type="button"><twig:ux:icon name="tabler:trash" /></button>
     </div>
 {% endblock %}
 
 {% block tags_input_widget %}
     <div class="input-group">
         {{ form_widget(form, {'attr': {'data-toggle': 'tagsinput', 'data-tags': tags|json_encode}}) }}
-        <div class="input-group-append">
-            <span class="input-group-text">
-                <twig:ux:icon name="tabler:tags"/>
-            </span>
-        </div>
+        <span class="input-group-text"><twig:ux:icon name="tabler:tags" /></span>
     </div>
 {% endblock %}