Replace flatpickr with native datetime inputs

The date input library is no longer necessary, as browser datepickers have become mature and handle user language better.
cosmocode · Dec 5, 2024 · f3ffce4 · f3ffce4
1 parent a7779fc
commit f3ffce4
Show file tree

Hide file tree

Showing 8 changed files with 6 additions and 47 deletions.
diff --git a/public/css/flatpickr.min.css b/public/css/flatpickr.min.css
diff --git a/public/js/app.js b/public/js/app.js
@@ -21,10 +21,3 @@ initClonability();
 tooltips();
 initToggles();
 tablestyle();
-
-/**
- * Init flatpickr
- */
-flatpickr('input:read-write[data-calendar-type="date"]', {'dateFormat' : 'd.m.Y', 'allowInput' : true});
-flatpickr('input:read-write[data-calendar-type="time"]', {'noCalendar' : true, 'enableTime' : true, 'time_24hr' : true, 'allowInput' : true});
-flatpickr('input:read-write[data-calendar-type="datetime"]', {'enableTime' : true, 'time_24hr' : true, 'dateFormat' : 'd.m.Y H:i', 'allowInput' : true});
diff --git a/public/js/clone.js b/public/js/clone.js
@@ -25,17 +25,6 @@ function cloneHandler(e) {
         const label = cloned.querySelector('label');
         label.setAttribute('for', newId);
 
-        const pickr = input.dataset.calendarType;
-        if (pickr === 'date') {
-            flatpickr(input, {'dateFormat' : 'd.m.Y', 'allowInput' : true});
-        }
-        if (pickr === 'datetime') {
-            flatpickr(input, {'enableTime' : true, 'time_24hr' : true, 'dateFormat' : 'd.m.Y H:i', 'allowInput' : true});
-        }
-        if (pickr === 'time') {
-            flatpickr(input, {'noCalendar' : true, 'enableTime' : true, 'time_24hr' : true, 'allowInput' : true});
-        }
-
         elem.parentNode.parentNode.after(cloned);
         elem.parentNode.removeChild(elem);
     }

diff --git a/public/js/flatpickr.min.js b/public/js/flatpickr.min.js
diff --git a/view/_form.twig b/view/_form.twig
@@ -8,11 +8,9 @@
         <link rel="stylesheet" href="/css/bulma.min.css" />
         <link rel="stylesheet" href="/css/bulma-tooltip.min.css" />
         <link rel="stylesheet" href="/css/app.css" />
-        <link rel="stylesheet" href="/css/flatpickr.min.css" >
         {%- if css is not empty -%}
             <link rel="stylesheet" href={{ fileUrl(css) }} >
         {% endif %}
-        <script src="/js/flatpickr.min.js"></script>
         <script src="/js/signature_pad.min.js"></script>
     </head>
     <body>

diff --git a/view/date.twig b/view/date.twig
@@ -14,12 +14,11 @@
                 </div>
                 <div class="control is-cloneable">
                     <input
-                            type="text"
+                            type="date"
                             id="{{ id }}-{{ loop.index }}"
                             name="{{ id }}[]"
                             value="{{ val }}"
                             class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                            data-calendar-type="date"
                             {% if is_readonly%}readonly{% endif %}
                             {% if placeholder is not empty -%}
                                 placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
@@ -46,12 +45,11 @@
             </div>
             <div class="control">
                 <input
-                        type="text"
+                        type="date"
                         id="{{ id }}"
                         name="{{ id }}"
                         value="{{ value }}"
                         class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                        data-calendar-type="date"
                         {% if is_readonly%}readonly{% endif %}
                         {% if placeholder is not empty -%}
                             placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"

diff --git a/view/datetime.twig b/view/datetime.twig
@@ -14,12 +14,11 @@
                 </div>
                 <div class="control is-cloneable">
                     <input
-                            type="text"
+                            type="datetime-local"
                             id="{{ id }}-{{ loop.index }}"
                             name="{{ id }}[]"
                             value="{{ val }}"
                             class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                            data-calendar-type="datetime"
                             {% if is_readonly%}readonly{% endif %}
                             {% if placeholder is not empty -%}
                                 placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
@@ -46,12 +45,11 @@
             </div>
             <div class="control">
                 <input
-                    type="text"
+                    type="datetime-local"
                     id="{{ id }}"
                     name="{{ id }}"
                     value="{{ value }}"
                     class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                    data-calendar-type="datetime"
                     {% if is_readonly%}readonly{% endif %}
                     {% if placeholder is not empty -%}
                         placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"

diff --git a/view/time.twig b/view/time.twig
@@ -14,12 +14,11 @@
                 </div>
                 <div class="control is-cloneable">
                     <input
-                            type="text"
+                            type="time"
                             id="{{ id }}-{{ loop.index }}"
                             name="{{ id }}[]"
                             value="{{ val }}"
                             class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                            data-calendar-type="time"
                             {% if is_readonly%}readonly{% endif %}
                             {% if placeholder is not empty -%}
                                 placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"
@@ -46,12 +45,11 @@
             </div>
             <div class="control">
                 <input
-                        type="text"
+                        type="time"
                         id="{{ id }}"
                         name="{{ id }}"
                         value="{{ value }}"
                         class="input form-input{% if is_readonly%} has-background-grey-lighter{% endif %} {{ errors is not empty ? 'is-danger' }}"
-                        data-calendar-type="time"
                         {% if is_readonly%}readonly{% endif %}
                         {% if placeholder is not empty -%}
                             placeholder="{{ placeholder ~ (is_required and label is empty ? ' *') }}"