JQuery datetimepicker (xdsoft): dynamically limited date range with two built-in datepickers
Using the jqery datepicker plugin is available here :
There is documentation showing how we can have a dynamically limited date range with two dates, if shown when clicking on the text inputs. We previously worked on this process, however now the client has requested that the calendars be displayed in a row, which means that using the following code from their docs no longer works:
onShow:function( ct ){
this.setOptions({
minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
})
},
I'm guessing that we can somehow use 'onGenerate' or 'onSelectDate' to do something like this, but can't figure out how to do it.
The mission is as follows:
- make sure the minimum picker pick date and time may not be before the picker pick date and time, AND
- once the collection date and time is selected, make sure the delivery date / time cannot be reset to something AFTER the date and time selected for the collection
Here's the JSfiddle - there is a game :)
+3
source to share
1 answer
I managed to meet the two requirements you need using 'onChangeDateTime'. below is the complete code:
$(function () {
/**
* we declare a variable here so that we can use it within both our datepicker onChangeDateTime functions
* this var will hold the time of delivery + 1hour and will be used in the collection picker when both delivery and collection dates are the same
*/
var setMinTime = "";
//Delivery - DatePicker1
$('#products_delivery').datetimepicker({
inline: true,
formatDate: 'Y/m/d',
dayOfWeekStart: 1,
lang: 'en',
allowTimes: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
defaultSelect: false,
onChangeDateTime: function (deliveryDateSelected) {
//when we change Date in delivery picker, we set the collection picker to have this date as minimum
$("#products_collection").datetimepicker({
minDate: deliveryDateSelected
});
// get the time from delivery picker and add 1 hour, so we can set minTime in collection picker if needed
var curTimePlusOneHour = deliveryDateSelected.getHours() + 1;
setMinTime = curTimePlusOneHour.toString() + ":00";
}
}); //End of delivery datepicker
//Collection - DatePicker2
$('#products_collection').datetimepicker({
inline: true,
formatDate: 'Y/m/d',
dayOfWeekStart: 1,
lang: 'en',
allowTimes: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
defaultSelect: false,
onChangeDateTime: function (collectionDateSelected) {
//set the maxDate of delivery picker according to our collection picked day
$("#products_delivery").datetimepicker({
maxDate: collectionDateSelected
});
//get the value of the dates without time
//first we gate the value of the selected date
var deliveryDate = $('#products_delivery').val();
//deliveryDate is in format "2015/08/06 14:08",and is a string so we use split to take only the date without the time
var deliveryDateArr = deliveryDate.split(' ');
// same as above
var collectionDate = $('#products_collection').val();
var collectionDateArr = collectionDate.split(' ');
//if same date also set minTime
if (deliveryDateArr[0] === collectionDateArr[0]) {
$("#products_collection").datetimepicker({
minTime: setMinTime
});
} else {
$("#products_collection").datetimepicker({
minTime: "09:00"
});
} //End of if..else..
}
}); //End of collection datepicker
});
Here's a JSFiddle , take a look :) - hope it helped :)
+4
source to share