From f12c79b59030dd1684f03575efa700883c643240 Mon Sep 17 00:00:00 2001
From: Lucas Gass <lucas@bywatersolutions.com>
Date: Tue, 23 Apr 2024 19:51:14 +0000
Subject: [PATCH] Bug 36342: Add Maskito date range support

To test:
1. Make some items bookable by going to catalogue/moredetail.pl?biblionumber=X
2. On the toolbar for that record you should now see "Place booking"
3. Try placing a booking and adding the date range for "Booking dates" manually.
4. Play with the DateFormat system preference to make sure this works for all supported date formats.

Signed-off-by: David Nind <david@davidnind.com>
---
 .../prog/en/includes/calendar.inc             | 23 +++++++++++--------
 .../prog/en/includes/modals/place_booking.inc |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
index 3eae704b50..a34535d293 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
@@ -89,22 +89,27 @@
         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));
-                    }
+            let accepts_range = $(thisInput).data('flatpickr-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 ) {
             var thisInput = instance.input;
             let accepts_time = $(thisInput).data('flatpickr-enable-time');
-            let accepts_period = $(thisInput).data('flatpickr-period');
+            let accepts_range = $(thisInput).data('flatpickr-range');
             let options = {};
-            if ( !accepts_period ) {
+            if ( accepts_range ) {
+                options = maskitoDateRangeOptionsGenerator({
+                    mode: altinput_dateformat,
+                    dateSeparator: delimiter,
+                    rangeSeparator: " to ",
+                });
+                new Maskito( instance.altInput, options );
+            } else {
                 if ( accepts_time ) {
                     options = maskitoDateTimeOptionsGenerator({
                         dateMode: altinput_dateformat,
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
index 1840e2b791..448f29778a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
@@ -39,7 +39,7 @@
                             <li>
                                 <div id="period_fields">
                                     <label class="required" for="period">Booking dates: </label>
-                                    <input type="text" id="period" name="period" class="flatpickr" data-flatpickr-futuredate="true" data-flatpickr-disable-shortcuts="true" required="required" disabled="true" autocomplete="off">
+                                    <input type="text" id="period" name="period" class="flatpickr" data-flatpickr-futuredate="true" data-flatpickr-disable-shortcuts="true" data-flatpickr-range="true" required="required" disabled="true" autocomplete="off">
                                     <span class="required">Required</span>
                                 </div>
                                 <div class="hint">Select the booking start and end date</div>
-- 
2.39.2