Bug 28983: Use Flatpickr on various pages

This patch replaces the use of jQueryUI's datepicker on various
unrelated pages.

To test, apply the patch and test the following pages to confirm
that datepickers work correctly. "Linked" date fields should prevent a
"to" selection which preceeds the selected "from" date.

- Tools -> Patron clubs -> New club: Linked "start date" and "end date"
  fields.
- ILL requests: Two linked pairs of date fields in the sidebar, "Date
  placed between" and "Updated between." Each pair should work correctly
  and table filtering by date should work correctly.
- Tools -> Label creator -> Manage -> Layout batches -> Edit a batch ->
  Add items. This should trigger a popup window with a linked pair of
  date fields, "Added on or after date," and "Added on or before date."
- Point of sale -> Transaction history: "From" and "To" linked date
  field in the "Older transactions" section.
- Acquisitions -> Suggestions -> Add a suggestion: "Created by,"
  "Accepted on," and "Managed by" fields.
- Tools -> Tags -> Filter tags by date.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt
index 8d89d44..6a2b51a 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt
@@ -73,12 +73,12 @@
 
                         <li>
                             <label for="from">Start date:</label>
-                            <input name="date_start" id="from" size="10" readonly="readonly" class="datepickerfrom" value="[% club.date_start | $KohaDates %]">
+                            <input name="date_start" id="from" size="10" class="flatpickrfrom" value="[% club.date_start | $KohaDates %]">
                         </li>
 
                         <li>
                             <label for="to">End date:</label>
-                            <input name="date_end" id="to" size="10" readonly="readonly" class="datepickerto" value="[% club.date_end | $KohaDates %]" >
+                            <input name="date_end" id="to" size="10" class="flatpickrto" value="[% club.date_end | $KohaDates %]" >
                         </li>
 
                         <li>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
index 759c9b9..fb5a645 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
@@ -73,19 +73,19 @@
                                 </li>
                                 <li>
                                     <label for="illfilter_dateplaced_start">Date placed between:</label>
-                                    <input type="text" name="illfilter_dateplaced_start" id="illfilter_dateplaced_start" class="datepicker" />
+                                    <input type="text" name="illfilter_dateplaced_start" id="illfilter_dateplaced_start" />
                                 </li>
                                 <li>
                                     <label for="illfilter_dateplaced_end">and:</label>
-                                    <input type="text" name="illfilter_dateplaced_end" id="illfilter_dateplaced_end" class="datepicker" />
+                                    <input type="text" name="illfilter_dateplaced_end" id="illfilter_dateplaced_end" />
                                 </li>
                                 <li>
                                     <label for="illfilter_datemodified_start">Updated between:</label>
-                                    <input type="text" name="illfilter_datemodified_start" id="illfilter_datemodified_start" class="datepicker" />
+                                    <input type="text" name="illfilter_datemodified_start" id="illfilter_datemodified_start" />
                                 </li>
                                 <li>
                                     <label for="illfilter_datemodified_end">and:</label>
-                                    <input type="text" name="illfilter_datemodified_end" id="illfilter_datemodified_end" class="datepicker" />
+                                    <input type="text" name="illfilter_datemodified_end" id="illfilter_datemodified_end" />
                                 </li>
                                 <li>
                                     <label for="illfilter_branchname">Library:</label>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt
index a6f905d..aee3f2f 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt
@@ -88,16 +88,17 @@ to add to Batch [% batch_id | html %]
 
 <fieldset class="rows">
 <ol>
-       <li>
-    <label for="from">Added on or after date: </label>
-        <input type="text" size="10" id="from" name="datefrom" class="datepickerfrom" value="" />
-<div class="hint">[% INCLUDE 'date-format.inc' %]</div>
-</li>
-<li>
-    <label for="to">Added on or before date: </label>
-        <input type="text" size="10" id="to" name="dateto" class="datepickerto" value="" />
-<div class="hint">[% INCLUDE 'date-format.inc' %]</div>
-</li></ol>
+    <li>
+        <label for="from">Added on or after date: </label>
+        <input type="text" size="10" id="from" name="datefrom" class="flatpickrfrom" value="" />
+        <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
+    </li>
+    <li>
+        <label for="to">Added on or before date: </label>
+        <input type="text" size="10" id="to" name="dateto" class="flatpickrto" value="" />
+        <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
+    </li>
+</ol>
 </fieldset>
 
 <fieldset class="action"><input type="submit" value="Search" class="submit" /> <a class="cancel close" href="#">Cancel</a></fieldset>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/pos/register.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/pos/register.tt
index bdef70e..b3f4a43 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/pos/register.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/pos/register.tt
@@ -160,9 +160,9 @@
                     <ol>
                         <li>
                             <label for="trange_f">From: </label>
-                            <input type="text" size="10" id="from" class="datepickerfrom" name="trange_f" value="[% trange_f | html %]"/>
+                            <input type="text" size="10" id="from" class="flatpickrfrom" name="trange_f" value="[% trange_f | html %]"/>
                             <label class="inline" for="trange_t">To: </label>
-                            <input type="text" size="10" id="to" class="datepickerto" name="trange_t" value="[% trange_t | html %]" />
+                            <input type="text" size="10" id="to" class="flatpickrto" name="trange_t" value="[% trange_t | html %]" />
                             <span class="hint">[% INCLUDE 'date-format.inc' %]</span>
                         </li>
                     </ol>
@@ -471,23 +471,6 @@
                 }
             ]
         }, [], 1);
-
-        $(document).ready(function() {
-            // http://jqueryui.com/demos/datepicker/#date-range
-            var dates = $( "#from, #to" ).datepicker({
-                changeMonth: true,
-                numberOfMonths: 1,
-                onSelect: function( selectedDate ) {
-                    var option = this.id == "from" ? "minDate" : "maxDate",
-                        instance = $( this ).data( "datepicker" );
-                        date = $.datepicker.parseDate(
-                            instance.settings.dateFormat ||
-                            $.datepicker._defaults.dateFormat,
-                            selectedDate, instance.settings );
-                    dates.not( this ).datepicker( "option", option, date );
-                }
-            });
-        });
     </script>
 [% END %]
 

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt
index 416623a..ad00aff 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt
@@ -500,7 +500,7 @@
                                             <label for="suggesteddate">[% tp('purchase suggestion created by', 'Created by:') | html %]</label>
                                         </th>
                                         <td>
-                                            <input type="text" id="suggesteddate" name="suggesteddate" class="datepicker" size="10" maxlength="10" value="[% suggesteddate | $KohaDates %]"/>[% INCLUDE 'date-format.inc' %]
+                                            <input type="text" id="suggesteddate" name="suggesteddate" class="flatpickr" size="10" maxlength="10" value="[% suggesteddate | $KohaDates %]"/> [% INCLUDE 'date-format.inc' %]
                                         </td>
                                         <td id="tdsuggestedby">
                                             <input type="hidden" id="suggestedby" name="suggestedby" value="[% suggestedby | html %]"/>
@@ -517,7 +517,7 @@
                                             <label for="accepteddate">Accepted on:</label>
                                         </th>
                                         <td>
-                                            <input type="text" id="accepteddate" name="accepteddate" class="datepicker" size="10" maxlength="10" value="[% accepteddate | $KohaDates %]" />[% INCLUDE 'date-format.inc' %]
+                                            <input type="text" id="accepteddate" name="accepteddate" class="flatpickr" size="10" maxlength="10" value="[% accepteddate | $KohaDates %]" />[% INCLUDE 'date-format.inc' %]
                                         </td>
                                         <td>
                                             <input type="hidden" id="acceptedby" name="acceptedby" value="[% acceptedby | html %]"/>
@@ -547,7 +547,7 @@
                         </li>
                         <li>
                             <label for="managedon">Managed on:</label>
-                            <input type="text" id="managedon" name="manageddate" class="datepicker" size="10" maxlength="10" value="[% manageddate | $KohaDates %]" />[% INCLUDE 'date-format.inc' %]
+                            <input type="text" id="managedon" name="manageddate" class="flatpickr" size="10" maxlength="10" value="[% manageddate | $KohaDates %]" />[% INCLUDE 'date-format.inc' %]
                         </li>
                         <li>
                             <label for="managedby_name">by:</label>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt
index 40e53f4..31bad45 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt
@@ -230,11 +230,11 @@ tr > td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
            </li>
            <li>
                        <label for="from">Date: from </label>
-            <input type="text" size="10" id="from" name="from" value="[% filter_date_approved_from | html %]" class="datepickerfrom" />
+            <input type="text" size="10" id="from" name="from" value="[% filter_date_approved_from | html %]" class="flatpickrfrom" />
                        <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
 
                        <label for="to">...to </label>
-            <input type="text" size="10" id="to" name="to" value="[% filter_date_approved_to | html %]" class="datepickerto" />
+            <input type="text" size="10" id="to" name="to" value="[% filter_date_approved_to | html %]" class="flatpickrto" />
                        <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
            </li>
   </ol>

diff --git a/koha-tmpl/intranet-tmpl/prog/js/ill-list-table.js b/koha-tmpl/intranet-tmpl/prog/js/ill-list-table.js
index abd0186..2c39ad7 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/ill-list-table.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/ill-list-table.js
@@ -335,6 +335,32 @@ $(document).ready(function() {
         $('#addcomment').toggleClass('content_hidden');
     });
 
+    var illfilter_dateplaced_start = $("#illfilter_dateplaced_start").flatpickr({
+        onClose: function( selectedDates, dateText, instance) {
+            validate_date( selectedDates, instance );
+            illfilter_dateplaced_end.set('minDate', selectedDates[0]);
+        }
+    });
+
+    var illfilter_dateplaced_end = $("#illfilter_dateplaced_end").flatpickr({
+        onClose: function( selectedDates, dateText, instance) {
+            validate_date( selectedDates, instance );
+        },
+    });
+
+    var illfilter_datemodified_start = $("#illfilter_datemodified_start").flatpickr({
+        onClose: function( selectedDates, dateText, instance) {
+            validate_date( selectedDates, instance );
+            illfilter_datemodified_end.set('minDate', selectedDates[0]);
+        }
+    });
+
+    var illfilter_datemodified_end = $("#illfilter_datemodified_end").flatpickr({
+        onClose: function( selectedDates, dateText, instance) {
+            validate_date( selectedDates, instance );
+        },
+    });
+
     // Filter partner list
     // Record the list of all options
     var ill_partner_options = $('#partners > option');
@@ -498,10 +524,10 @@ $(document).ready(function() {
 
             // Custom date range filtering
             $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
-                var placedStart = $('#illfilter_dateplaced_start').datepicker('getDate');
-                var placedEnd = $('#illfilter_dateplaced_end').datepicker('getDate');
-                var modifiedStart = $('#illfilter_datemodified_start').datepicker('getDate');
-                var modifiedEnd = $('#illfilter_datemodified_end').datepicker('getDate');
+                var placedStart = illfilter_dateplaced_start.selectedDates[0];
+                var placedEnd = illfilter_dateplaced_end.selectedDates[0];
+                var modifiedStart = illfilter_datemodified_start.selectedDates[0];
+                var modifiedEnd = illfilter_datemodified_end.selectedDates[0];
                 var rowPlaced = data[14] ? new Date(data[14]) : null;
                 var rowModified = data[16] ? new Date(data[16]) : null;
                 var placedPassed = true;