Bug 30011: Update links to jQueryUI assets, remove datepicker references, etc.

This patch updates templates to include the new version of jQueryUI. It removes some references to the now unused datepicker widget as well as the jQuery timepicker addon. Some minor JavaScript and style updates to fix issues resulting from the upgrade. To test, apply the patch and update the CSS in the staff interface AND in the OPAC (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). IN THE OPAC: - The OPAC only uses the tabs jQueryUI widget. - View pages where tabs are used: Bibliographic details, user summary, advanced search. IN THE STAFF INTERFACE: - The staff interface uses four jQueryUI widgets: accordion, autocomplete, sortable, and tabs - Test the accordion widget on two pages: Administration -> Table settings and Patrons -> Patrons requesting modifications. - Test autocomplete (requires PatronAutoComplete to be enabled) on various pages. For example: - From the "Check out" tab in the header search box. - From the "Search patrons" tab in the header search box, e.g. from the main Patrons page. - Place hold -> Search patrons. - Tools -> Patron lists -> Add patrons to list -> Patron search. - Test sortable: - Administration -> System preferences -> Language. - With more than one language installed you should be able to drag to re-order the enabled languages. Confirm that your change is saved successfully. - Administration -> MARC bibliographic framework -> MARC structure -> Edit subfields on a tag with multiple subfields. You should be able to drag to re-order the tabs at the top of the subfield constraints edit page. Confirm that your changes are saved successfully. - Cataloging -> New record. Test that you can re-order subfields under a tag with multiple subfields and that your changes are saved. - Tabs: View various pages with tabs: Check out, bibliographic details, basic MARC editor. They're everywhere. Also confirm that the removal of the leftover datepicker doesn't affect pages which use the calendar include: Test various pages which use Flatpickr, e.g. check out, renew, reports, etc. Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
2 years ago · de2d8ba3e4
22 changed files with 55 additions and 288 deletions
--- a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery-ui-timepicker-addon.min.js
+++ b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery-ui-timepicker-addon.min.js
--- a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js
+++ b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.dataTables.columnFilter.js
@ -239,95 +239,6 @@
            });


-        }
-
-
-        function fnCreateDateRangeInput(oTable) {
-
-            var aoFragments = sRangeFormat.split(/[}{]/);
-
-            th.html("");
-            //th.html(_fnRangeLabelPart(0));
-            var sFromId = oTable.attr("id") + '_range_from_' + i;
-            var from = $('<input type="text" class="date_range_filter" id="' + sFromId + '" rel="' + i + '"/>');
-            from.datepicker();
-            //th.append(from);
-            //th.append(_fnRangeLabelPart(1));
-            var sToId = oTable.attr("id") + '_range_to_' + i;
-            var to = $('<input type="text" class="date_range_filter" id="' + sToId + '" rel="' + i + '"/>');
-            //th.append(to);
-            //th.append(_fnRangeLabelPart(2));
-
-            for (ti = 0; ti < aoFragments.length; ti++) {
-
-                if (aoFragments[ti] == properties.sDateFromToken) {
-                    th.append(from);
-                } else {
-                    if (aoFragments[ti] == properties.sDateToToken) {
-                        th.append(to);
-                    } else {
-                        th.append(aoFragments[ti]);
-                    }
-                }
-
-
-            }
-
-
-            th.wrapInner('<span class="filter_column filter_date_range" />');
-            to.datepicker();
-            var index = i;
-            aiCustomSearch_Indexes.push(i);
-
-
-            //------------start date range filtering function
-
-            //$.fn.dataTableExt.afnFiltering.push(
-            oTable.dataTableExt.afnFiltering.push(
-	        function (oSettings, aData, iDataIndex) {
-	            if (oTable.attr("id") != oSettings.sTableId)
-	                return true;
-
-	            var dStartDate = from.datepicker("getDate");
-
-	            var dEndDate = to.datepicker("getDate");
-
-	            if (dStartDate == null && dEndDate == null) {
-	                return true;
-	            }
-
-	            var dCellDate = null;
-	            try {
-	                if (aData[_fnColumnIndex(index)] == null || aData[_fnColumnIndex(index)] == "")
-	                    return false;
-	                dCellDate = $.datepicker.parseDate($.datepicker.regional[""].dateFormat, aData[_fnColumnIndex(index)]);
-	            } catch (ex) {
-	                return false;
-	            }
-	            if (dCellDate == null)
-	                return false;
-
-
-	            if (dStartDate == null && dCellDate <= dEndDate) {
-	                return true;
-	            }
-	            else if (dStartDate <= dCellDate && dEndDate == null) {
-	                return true;
-	            }
-	            else if (dStartDate <= dCellDate && dCellDate <= dEndDate) {
-	                return true;
-	            }
-	            return false;
-	        }
-        );
-            //------------end date range filtering function
-
-            $('#' + sFromId + ',#' + sToId, th).change(function () {
-                oTable.fnDraw();
-                fnOnFiltered();
-            });
-
-
        }

        function fnCreateColumnSelect(oTable, aData, iColumn, nTh, sLabel, bRegex, oSelected) {
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@ -233,7 +233,6 @@ aside {
                width: 100%;
            }

-            .hasDatepicker,
            .flatpickr-input {
                margin-right: 3px;
                width: calc(100% - 20px);
@ -2788,14 +2787,14 @@ td {
    font-weight: normal;
 }

-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-    background: #FFFFFF none;
-    border: 1px solid #AAAAAA;
-    color: #212121;
-    font-weight: normal;
-}
+// .ui-state-active,
+// .ui-widget-content .ui-state-active,
+// .ui-widget-header .ui-state-active {
+//     background: #FFFFFF none;
+//     border: 1px solid #AAAAAA;
+//     color: #212121;
+//     font-weight: normal;
+// }

 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
@ -2819,12 +2818,31 @@ td {
    cursor: default;
    position: absolute;

-    &.ui-widget-content {
-        .ui-state-hover {
-            background: #E6F0F2 none;
-            border: 1px solid #B9D8D9;
-            color: #212121;
-            font-weight: normal;
+    &.ui-menu {
+        li {
+            &.ui-menu-item {
+                padding: 3px 1em 3px .4em;
+
+                &:hover {
+                    background: #E6F0F2 none;
+                    color: #212121;
+                    font-weight: normal;
+                }
+
+                .ui-state-active {
+                    background: transparent none;
+                    border: 0;
+                }
+
+                .ui-menu-item-wrapper {
+                    padding: unset;
+                }
+
+                .ui-state-active,
+                .ui-state-focus {
+                    margin: 0;
+                }
+            }
        }
    }
 }
@ -3152,68 +3170,6 @@ td {
    }
 }

-// jQuery UI Datepicker
-.ui-datepicker {
-    box-shadow: 1px 1px 3px 0 #666;
-
-    table {
-        border: 0;
-        border-collapse: collapse;
-        font-size: .9em;
-        margin: 0 0 .4em;
-        width: 100%;
-    }
-
-    th {
-        background: transparent none;
-        border: 0;
-        font-weight: bold;
-        padding: .7em .3em;
-        text-align: center;
-    }
-}
-
-.ui-datepicker-trigger {
-    vertical-align: middle;
-}
-
-// css for timepicker
-.ui-timepicker-div {
-    dl {
-        text-align: left;
-
-        dd {
-            margin: 0 10px 10px 65px;
-        }
-
-        dt {
-            height: 25px;
-            margin-bottom: -25px;
-        }
-
-        td {
-            font-size: 90%;
-        }
-    }
-
-    .ui-widget-header {
-        margin-bottom: 8px;
-    }
-}
-
-.ui-tpicker-grid-label {
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-.ui_tpicker_second,
-.ui_tpicker_millisec,
-.ui_tpicker_microsec {
-    display: none;
-}
-
 // jQuery UI Accordion
 .ui-accordion-header,
 .ui-widget-content .ui-accordion-header {
@ -4561,19 +4517,18 @@ div .suggestion_note {
 }

 .ac-library {
-    background-color: #EEE;
+    background-color: #EEE !important;
    border-radius: 4px;
    color: #000;
    display: inline-block;
    font-size: 80%;
-    padding: 1px 4px;
+    padding: 1px 4px !important;
 }

 .ac-currentlibrary {
    .ac-library {
-        background-color: #E6FCB7;
+        background-color: #E6FCB7 !important;
        font-weight: bold;
-
    }
 }

--- a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
@ -6,23 +6,18 @@
 <script>
    var debug    = "[% debug | html %]";
    var dateformat_pref = "[% Koha.Preference('dateformat ') | html %]";
-    var dateformat_string = "";
    var flatpickr_dateformat_string = "";
    switch ( dateformat_pref ){
        case "us":
-            dateformat_string = "mm/dd/yy";
            flatpickr_dateformat_string = "m/d/Y";
            break;
        case "metric":
-            dateformat_string = "dd/mm/yy";
            flatpickr_dateformat_string = "d/m/Y";
            break;
        case "dmydot":
-            dateformat_string = "dd.mm.yy";
            flatpickr_dateformat_string = "d.m.Y";
            break;
        default:
-            dateformat_string = "yy-mm-dd";
            flatpickr_dateformat_string = "Y-m-d";
    }
    var sentmsg = 0;
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
@ -14,7 +14,11 @@

 <link rel="shortcut icon" href="[% IF ( IntranetFavicon ) %][% IntranetFavicon | html %][% ELSE %][% interface | html %]/[% theme | html %]/img/favicon.ico[% END %]" type="image/x-icon" />

-[% Asset.css("lib/jquery/jquery-ui-1.11.4.min.css") | $raw %]
+[% IF ( bidi ) %]
+    [% Asset.css("lib/jquery/jquery-ui-rtl-1.13.1.min.css") | $raw %]
+[% ELSE %]
+    [% Asset.css("lib/jquery/jquery-ui-1.13.1.min.css") | $raw %]
+[% END %]
 [% Asset.css("lib/bootstrap/bootstrap.min.css") | $raw %]
 [% Asset.css("lib/bootstrap/bootstrap-theme.min.css") | $raw %]
 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
@ -2,7 +2,7 @@
 [% USE Asset %]
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="shortcut icon" href="[% IF ( IntranetFavicon ) %][% IntranetFavicon | html %][% ELSE %][% interface | html %]/[% theme | html %]/img/favicon.ico[% END %]" type="image/x-icon" />
-[% Asset.css("lib/jquery/jquery-ui-1.11.4.min.css") | $raw %]
+[% Asset.css("lib/jquery/jquery-ui-1.13.1.min.css") | $raw %]
 [% Asset.css("lib/bootstrap/bootstrap.min.css") | $raw %]
 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% Asset.css("css/installer.css")  | $raw %]
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc
@ -2,7 +2,7 @@
 [% USE Asset %]
        [% Asset.js("lib/jquery/jquery-2.2.3.min.js") | $raw %]
        [% Asset.js("lib/jquery/jquery-migrate-1.3.0.min.js") | $raw %]
-        [% Asset.js("lib/jquery/jquery-ui-1.11.4.min.js") | $raw %]
+        [% Asset.js("lib/jquery/jquery-ui-1.13.1.min.js") | $raw %]
        [% Asset.js("lib/bootstrap/bootstrap.min.js") | $raw %]
        [% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %]
        <!-- installer-intranet-bottom.inc -->
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc
@ -18,7 +18,7 @@

 [% Asset.js("lib/jquery/jquery-2.2.3.min.js") | $raw %]
 [% Asset.js("lib/jquery/jquery-migrate-1.3.0.min.js") | $raw %]
-[% Asset.js("lib/jquery/jquery-ui-1.11.4.min.js") | $raw %]
+[% Asset.js("lib/jquery/jquery-ui-1.13.1.min.js") | $raw %]
 [% Asset.js("lib/shortcut/shortcut.js") | $raw %]
 [% Asset.js("lib/jquery/plugins/jquery.cookie.min.js") | $raw %]
 [% Asset.js("lib/js-cookie/js.cookie-2.2.1.min.js") | $raw %]
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@ -1002,8 +1002,6 @@
 [% MACRO jsinclude BLOCK %]
    [% INCLUDE 'datatables.inc' %]
    [% INCLUDE 'columns_settings.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
-    [% INCLUDE 'timepicker.inc' %]
    [% INCLUDE 'select2.inc' %]
    [% Asset.js("lib/jquery/plugins/rowGroup/dataTables.rowGroup.min.js") | $raw %]
    [% INCLUDE 'js-date-format.inc' %]
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation_batch_checkouts.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation_batch_checkouts.tt
@ -340,7 +340,6 @@
 [% MACRO jsinclude BLOCK %]
    [% INCLUDE 'calendar.inc' %]
    [% INCLUDE 'datatables.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
    <script>
        $(document).ready(function() {
            if($('#barcodelist').length) {
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline-mf.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline-mf.tt
@ -7,10 +7,8 @@ CACHE:
 [% interface | html %]/lib/bootstrap/bootstrap.min.css
 [% interface | html %]/lib/bootstrap/bootstrap-theme.min.css
 [% interface | html %]/lib/bootstrap/bootstrap.min.js
-[% interface | html %]/lib/jquery/images/ui-icons_222222_256x240.png
-[% interface | html %]/lib/jquery/images/ui-icons_454545_256x240.png
-[% interface | html %]/lib/jquery/jquery-ui-1.11.4.min.css
-[% interface | html %]/lib/jquery/jquery-ui-1.11.4.min.js
+[% interface | html %]/lib/jquery/jquery-ui-1.13.1.min.css
+[% interface | html %]/lib/jquery/jquery-ui-1.13.1.min.js
 [% interface | html %]/lib/jquery/jquery-2.2.3.min.js
 [% interface | html %]/lib/jquery/jquery-migrate-1.3.0.min.js
 [% interface | html %]/lib/jquery/plugins/jquery.cookie.min.js
@ -23,7 +21,6 @@ CACHE:
 [% interface | html %]/[% theme | html %]/js/basket.js
 [% interface | html %]/[% theme | html %]/js/offlinecirc.js
 [% interface | html %]/[% theme | html %]/js/staff-global.js
-[% interface | html %]/lib/jquery/plugins/jquery-ui-timepicker-addon.min.js
 [% themelang | html %]/lib/yui/reset-fonts-grids.css
 [% interface | html %]/prog/img/koha-logo-medium.png
 [% interface | html %]/prog/img/loading.gif
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
@ -235,8 +235,6 @@
    [% INCLUDE 'calendar.inc' %]
    [% Asset.js("lib/jquery/plugins/jquery.indexeddb.js") | $raw %]
    [% Asset.js("js/offlinecirc.js") | $raw %]
-    [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
-    [% INCLUDE 'timepicker.inc' %]
    <script>
        var ALERT_SUCCESSFUL_CHECKIN = _("Checked in item.");
        var ALERT_MATERIALS = _("Note about the accompanying materials: %s");
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
@ -1184,7 +1184,6 @@
    [% INCLUDE 'datatables.inc' %]
    [% INCLUDE 'columns_settings.inc' %]
    [% INCLUDE 'calendar.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
    [% Asset.js("js/pages/circulation.js") | $raw %]
    [% IF ( ReturnClaims ) %]
        <script>
@ -1193,7 +1192,6 @@
        </script>
        [% Asset.js("js/resolve_claim_modal.js") | $raw %]
    [% END %]
-    [% INCLUDE 'timepicker.inc' %]

    <script>
        function Dopop(link) {
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
@ -835,7 +835,6 @@
    [% INCLUDE 'columns_settings.inc' %]
    [% INCLUDE 'calendar.inc' %]
    [% INCLUDE 'select2.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
    <script>
        var prefilters = '[% prefilters | $raw %]';
        // Set column settings
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/members-update.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/members-update.tt
@ -211,6 +211,7 @@
            $( "#pending_updates" ).accordion({
                collapsible: true,
                heightStyle: "content",
+                header: ".panel-header",
                [%- IF ( active ) -%]
                    active: $(".panel-header").index( $("#panel-header-[% active | html %]") )
                [%- ELSE -%]
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
@ -836,8 +836,6 @@
    [% INCLUDE 'datatables.inc' %]
    [% Asset.js("lib/jquery/plugins/rowGroup/dataTables.rowGroup.min.js") | $raw %]
    [% INCLUDE 'columns_settings.inc' %]
-    [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
-    [% INCLUDE 'timepicker.inc' %]
    [% INCLUDE 'select2.inc' %]
    [% INCLUDE 'js-date-format.inc' %]
    <script>
--- a/koha-tmpl/intranet-tmpl/prog/js/calendar.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/calendar.js
@ -101,33 +101,6 @@ function DateTime_from_syspref(date_time) {
    return datetime;
 }

-/* Instead of including multiple localization files as you would normally see with
-   jQueryUI we expose the localization strings in the default configuration */
-jQuery(function ($) {
-    $.datepicker.regional[''] = {
-        closeText: __("Done"),
-        prevText: __("Prev"),
-        nextText: __("Next"),
-        currentText: __("Today"),
-        monthNames: [__("January"), __("February"), __("March"), __("April"), __("May"), __("June"),
-            __("July"), __("August"), __("September"), __("October"), __("November"), __("December")
-        ],
-        monthNamesShort: [__("Jan"), __("Feb"), __("Mar"), __("Apr"), __("May"), __("Jun"),
-            __("Jul"), __("Aug"), __("Sep"), __("Oct"), __("Nov"), __("Dec")
-        ],
-        dayNames: [__("Sunday"), __("Monday"), __("Tuesday"), __("Wednesday"), __("Thursday"), __("Friday"), __("Saturday")],
-        dayNamesShort: [__("Sun"), __("Mon"), __("Tue"), __("Wed"), __("Thu"), __("Fri"), __("Sat")],
-        dayNamesMin: [__("Su"), __("Mo"), __("Tu"), __("We"), __("Th"), __("Fr"), __("Sa")],
-        weekHeader: __("Wk"),
-        dateFormat: dateformat_string,
-        firstDay: calendarFirstDayOfWeek,
-        isRTL: bidi,
-        showMonthAfterYear: false,
-        yearSuffix: ''
-    };
-    $.datepicker.setDefaults($.datepicker.regional['']);
-});
-
 /*  jQuery Validator plugin custom method
    This allows you to check that a given date falls after another.
    It is required that a message be defined.
@ -170,53 +143,3 @@ var flatpickr_months = {
    shorthand: [ __("Jan"), __("Feb"), __("Mar"), __("Apr"), __("May"), __("Jun"), __("Jul"), __("Aug"), __("Sep"), __("Oct"), __("Nov"), __("Dec")],
    longhand: [ __("January"), __("February"), __("March"), __("April"), __("May"), __("June"), __("July"), __("August"), __("September"), __("October"), __("November"), __("December")]
 };
-
-$(document).ready(function () {
-
-    $.datepicker.setDefaults({
-        showOn: "both",
-        buttonImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVQ4jWNgoAZYd/LVf3IwigGkAuwGLE4hDg9eA4il8RqADVdtLYVjZLVEuwDZAKJcgKxh+zkyXIBuI8lhgG4jOqZdLJACMAygKDNRAgBj9qOB+rWnhAAAAABJRU5ErkJggg==",
-        buttonImageOnly: true,
-        buttonText: __("Select date"),
-        changeMonth: true,
-        changeYear: true,
-        showButtonPanel: true,
-        showOtherMonths: true,
-        selectOtherMonths: true,
-        yearRange: "c-100:c+10"
-    });
-
-    $(".datepicker").datepicker({
-        onClose: function (dateText, inst) {
-            validate_date(dateText, inst);
-        },
-    }).on("change", function () {
-        if (!is_valid_date($(this).val())) {
-            $(this).val("");
-        } else {
-            var the_date = $.datepicker.parseDate(dateformat_string, $(this).val());
-            $(this).datepicker("setDate",the_date);
-        }
-    });
-    // http://jqueryui.com/demos/datepicker/#date-range
-    var dates = $(".datepickerfrom, .datepickerto").datepicker({
-        changeMonth: true,
-        numberOfMonths: 1,
-        onSelect: function (selectedDate) {
-            var option = this.id == "from" ? "minDate" : "maxDate",
-                instance = $(this).data("datepicker");
-            var date = $.datepicker.parseDate(
-                instance.settings.dateFormat ||
-                $.datepicker._defaults.dateFormat,
-                selectedDate, instance.settings);
-            dates.not(this).datepicker("option", option, date);
-        },
-        onClose: function (dateText, inst) {
-            validate_date(dateText, inst);
-        },
-    }).on("change", function () {
-        if (!is_valid_date($(this).val())) {
-            $(this).val("");
-        }
-    });
-});
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
@ -10,9 +10,9 @@
 [% END %]
 <link rel="shortcut icon" href="[% IF ( Koha.Preference('OpacFavicon') ) %][% Koha.Preference('OpacFavicon') | url %][% ELSE %][% interface | url %]/[% theme | url %]/images/favicon.ico[% END %]" type="image/x-icon" />
 [% IF ( bidi ) %]
-    [% Asset.css("lib/jquery/jquery-ui-rtl-1.12.1.min.css") | $raw %]
+    [% Asset.css("lib/jquery/jquery-ui-rtl-1.13.1.min.css") | $raw %]
 [% ELSE %]
-    [% Asset.css("lib/jquery/jquery-ui-1.12.1.min.css") | $raw %]
+    [% Asset.css("lib/jquery/jquery-ui-1.13.1.min.css") | $raw %]
 [% END %]
 [% IF ( Koha.Preference('opaclayoutstylesheet') && Koha.Preference('opaclayoutstylesheet') != "opac.css" ) %]
    [% SET opaclayoutstylesheet = Koha.Preference('opaclayoutstylesheet') %]
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
@ -120,11 +120,7 @@
 <!-- JavaScript includes -->
 [% Asset.js("lib/jquery/jquery-3.4.1.min.js") | $raw %]
 [% Asset.js("lib/jquery/jquery-migrate-3.1.0.min.js") | $raw %]
-[% Asset.js("lib/jquery/jquery-ui-1.12.1.min.js") | $raw %]
-<script>
-// Resolve name collision between jQuery UI and Twitter Bootstrap
-$.widget.bridge('uitooltip', $.ui.tooltip);
-</script>
+[% Asset.js("lib/jquery/jquery-ui-1.13.1.min.js") | $raw %]
 [% Asset.js("lib/bootstrap/js/bootstrap.bundle.min.js") | $raw %]
 [% Asset.js("lib/fontfaceobserver.min.js") | $raw %]
 [% Asset.js("lib/enquire.min.js") | $raw %]
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
@ -35,10 +35,10 @@
    <link rel="shortcut icon" href="[% interface | html %]/[% theme | html %]/images/favicon.ico" type="image/x-icon" />
 [% END %]
 [% IF ( bidi ) %]
-    [% Asset.css("lib/jquery/jquery-ui-rtl-1.12.1.min.css") | $raw %]
+    [% Asset.css("lib/jquery/jquery-ui-rtl-1.13.1.min.css") | $raw %]
    [% Asset.css("css/sco-rtl.css") | $raw %]
 [% ELSE %]
-    [% Asset.css("lib/jquery/jquery-ui-1.12.1.css") | $raw %]
+    [% Asset.css("lib/jquery/jquery-ui-1.13.1.css") | $raw %]
    [% Asset.css("css/sco.css") | $raw %]
 [% END %]
 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/help.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/help.tt
@ -7,7 +7,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Koha [% Version | html %]" /> <!-- leave this for stats -->
 <link rel="shortcut icon" href="[% IF ( Koha.Preference('OpacFavicon')  ) %][% Koha.Preference('OpacFavicon') | url %][% ELSE %][% interface | html %]/[% theme | html %]/images/favicon.ico[% END %]" type="image/x-icon" />
-[% Asset.css("lib/jquery/jquery-ui-1.12.1.css") | $raw %]
+[% Asset.css("lib/jquery/jquery-ui-1.13.1.css") | $raw %]
 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% Asset.css("css/sco.css") | $raw %]
 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
@ -16,10 +16,10 @@
 [% END %]
 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% IF ( bidi ) %]
-    [% Asset.css("lib/jquery/jquery-ui-rtl-1.12.1.min.css") | $raw %]
+    [% Asset.css("lib/jquery/jquery-ui-rtl-1.13.1.min.css") | $raw %]
    [% Asset.css("css/sco-rtl.css") | $raw %]
 [% ELSE %]
-    [% Asset.css("lib/jquery/jquery-ui-1.12.1.css") | $raw %]
+    [% Asset.css("lib/jquery/jquery-ui-1.13.1.css") | $raw %]
    [% Asset.css("css/sco.css") | $raw %]
 [% END %]
 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]