BWS-PKG - Bug 37371: Direct input of dates not working when editing o…

…nly part of a date Bug 37371: Move Maskito instantiation to onReady Signed-off-by: Owen Leonard <[email protected]> Signed-off-by: Kyle M Hall <[email protected]> Bug 37371: Set overwrite mode to replace In our case I think overwriteMode needs to be set to replace: https://maskito.dev/core-concepts/overwrite-mode Signed-off-by: Owen Leonard <[email protected]> Signed-off-by: Kyle M Hall <[email protected]> Bug 37371: Move Maskito init to onReady in dateaccessioned.pl Signed-off-by: Owen Leonard <[email protected]> Signed-off-by: Kyle M Hall <[email protected]> Bug 37371: Move Maskito instantiation to onReady ( OPAC ) To test: 1. Find a any date picker in Koha, like DOB in the patron record. 2. Add a date, either manually or using the date picker. 3. Once there is a date like 07/15/2024 try to edit only part of the date, or the '15'. 4. The date easily becomes malformed. 5. APPLY PATCHSET, maybe clear your browser cache too 6. Try directly inputing dates. I would suggest the following places: -Patron record DOB -Specify due date on circ/circulation.pl as this includes time -Add item screen, this is the dateaccessioned plugin -OPAC self reg/self modify Signed-off-by: Owen Leonard <[email protected]> Signed-off-by: Kyle M Hall <[email protected]>
bywatersolutions · Jul 18, 2024 · f369625 · f369625
1 parent e6488e2
commit f369625
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/cataloguing/value_builder/dateaccessioned.pl b/cataloguing/value_builder/dateaccessioned.pl
@@ -41,15 +41,19 @@
 
 \$(document).ready(function(){
     \$("#$function_name").flatpickr({
-        onOpen: function(selectedDates, dateStr, instance) {
+        onReady: function(selectedDates, dateStr, instance) {
             let options = maskitoDateOptionsGenerator({
                 mode: altinput_dateformat,
                 separator: delimiter,
+                overwriteMode: 'replace',
             });
+
+            new Maskito( instance.altInput, options );
+        },
+        onOpen: function(selectedDates, dateStr, instance) {
             if (dateStr == '') {
                 instance.setDate(new Date());
             }
-            new Maskito( instance.altInput, options );
         }
     });
 });

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
@@ -85,39 +85,41 @@
                         instance.set('allowInput',false);
                     }
                 });
-        },
-        onChange: function( selectedDates, dateText, instance) {
-            var thisInput = instance.input;
-            let accepts_time = $(thisInput).data('flatpickr-enable-time');
-            let accepts_period = $(thisInput).data('flatpickr-period');
-            if ( !accepts_period ) {
-                if ( accepts_time ) {
-                    let parsedDate = flatpickr.parseDate(dateText, instance.config.dateFormat);
-                    if ( !parsedDate.getHours() ) {
-                        instance.setDate(selectedDates[0].setHours(23, 59, 0, 0));
-                    }
-                }
-            }
-        },
-        onOpen: function( selectedDates, dateText, instance ) {
+
+            /* When flatpickr instance is ready, add maskito input mask */
             var thisInput = instance.input;
             let accepts_time = $(thisInput).data('flatpickr-enable-time');
             let accepts_period = $(thisInput).data('flatpickr-period');
-            let options = {};
+            let maskitoOptions = {};
             if ( !accepts_period ) {
                 if ( accepts_time ) {
-                    options = maskitoDateTimeOptionsGenerator({
+                    maskitoOptions = maskitoDateTimeOptionsGenerator({
                         dateMode: altinput_dateformat,
                         timeMode: 'HH:MM',
                         dateSeparator: delimiter,
+                        overwiteMode: 'replace',
                     });
                 } else {
-                    options = maskitoDateOptionsGenerator({
+                    maskitoOptions = maskitoDateOptionsGenerator({
                         mode: altinput_dateformat,
                         separator: delimiter,
+                        overwiteMode: 'replace',
                     });
                 }
-                new Maskito( instance.altInput, options );
+            }
+            new Maskito( instance.altInput, maskitoOptions );
+        },
+        onChange: function( selectedDates, dateText, instance) {
+            var thisInput = instance.input;
+            let accepts_time = $(thisInput).data('flatpickr-enable-time');
+            let accepts_period = $(thisInput).data('flatpickr-period');
+            if ( !accepts_period ) {
+                if ( accepts_time ) {
+                    let parsedDate = flatpickr.parseDate(dateText, instance.config.dateFormat);
+                    if ( !parsedDate.getHours() ) {
+                        instance.setDate(selectedDates[0].setHours(23, 59, 0, 0));
+                    }
+                }
             }
         },
         onClose: function( selectedDates, dateText, instance) {

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc
@@ -102,15 +102,16 @@
                         instance.set('allowInput',false);
                     }
                 });
-        },
-        onOpen: function( selectedDates, dateText, instance ) {
-            var thisInput = instance.input;
-            let options = maskitoDateOptionsGenerator({
-                mode: altinput_dateformat,
-                separator: delimiter,
-            });
 
-            new Maskito( instance.altInput, options );
+                /* When flatpickr instance is ready, add maskito input mask */
+                var thisInput = instance.input;
+                let options = maskitoDateOptionsGenerator({
+                    mode: altinput_dateformat,
+                    separator: delimiter,
+                    overwriteMode: 'replace',
+                });
+
+                new Maskito( instance.altInput, options );
         },
         onClose: function( selectedDates, dateText, instance) {
             validate_date( dateText, instance );