Bug 31261: Disable dates in the past for curbside pickups

When creating a new pickup the dates in the past won't display any
available slots. It would be better to disable them in the date picker.

Test plan:
Setup curbside pickups for your library (see bug 30650 test plan if
needed)
Create a new pickup (staff and OPAC) and confirm that the date picker widget
has the dates in the past disabled.

QA note: More work would be needed to sync calendar.inc code between
OPAC and staff. Also note that the "clear date" code wasn't needed
(please confirm).

Sponsored-by: Association KohaLa - https://koha-fr.org/

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Jonathan Druart 2022-07-31 08:29:41 +02:00 committed by Tomas Cohen Arazi
parent 6df74598eb
commit 614b0a5033
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
3 changed files with 56 additions and 8 deletions

View file

@ -476,7 +476,7 @@
<li>
<label for="pickup_date">Pickup date: </label>
<input id="pickup_date" name="pickup_date" required="required" class="flatpickr" />
<input id="pickup_date" name="pickup_date" required="required" class="flatpickr" data-flatpickr-futuredate="true" />
</li>
<li id="pickup-times" class="radio"></li>

View file

@ -136,13 +136,61 @@
}
$(document).ready(function(){
$(".flatpickr").flatpickr();
$(".flatpickr").each(function(){
let options = {};
let refresh_max_date = 0;
let disable_buttons = [];
$(".clear-flatpickr").on("click", function(e){
e.preventDefault();
var element = $(this).data("fp");
if( element ){
document.querySelector("#" + element )._flatpickr.clear();
if( $(this).data("flatpickr-futuredate") === true ) {
let original_date = $(this).val();
if ( original_date ) {
original_date = Date_from_syspref( original_date ).getTime();
let tomorrow = new Date().fp_incr(1).getTime();
options['enable'] = [function(date){
date = date.getTime();
if ( date == original_date ) return true;
if ( date >= tomorrow) return true;
}];
}
else {
options['minDate'] = new Date().fp_incr(1);
}
disable_buttons.push(0); /* Yesterday */
disable_buttons.push(1); /* Today */
}
if( $(this).data("flatpickr-pastinclusive") === true ) {
options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
refresh_max_date = 1;
disable_buttons.push(2); /* Tomorrow */
}
if( $(this).data("flatpickr-pastdate") === true ) {
options['maxDate'] = new Date().fp_incr(-1).setHours(23, 59, 00, 00);
disable_buttons.push(1); /* Today */
disable_buttons.push(2); /* Tomorrow */
}
if ( $(this).data('flatpickr-enable-time') === true ) {
options['enableTime'] = true;
options['dateFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
}
let fp = $(this).flatpickr(options);
$(disable_buttons).each(function(index, value){
$(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled");
});
if ( refresh_max_date ) {
/* Refresh the maxDate every 30 secondes to make sure the user will not
be stuck with the minute passed.
Adding 1 minute to not introduce a gap.
Example: last update at 40s, a new minute passed at 00.
Between 00 and 10s the user won't be able click 'Today'.
*/
setInterval(() => {
let now = new Date();
fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
}, 30000);
}
});
});

View file

@ -243,7 +243,7 @@
</li>
<li id="pickup_date_item">
<label for="pickup-date">Pickup date:</label>
<input name="pickup_date" type="text" class="flatpickr" id="pickup-date" required="required"/>
<input name="pickup_date" type="text" class="flatpickr" id="pickup-date" required="required" data-flatpickr-futuredate="true" />
<div class="required_label required">Required</div>
</li>