I'd like to restrict my calendar for users to limit date range.
For example: if a user select March 10th 2014 at From, then the user must not select after June 10th 2014 at To.
Here is the code I've made:
Thanks in advance.
$(function() {
$( "#from" ).datepicker({
maxDate: 0,
dateFormat : 'dd-mm-yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
var date = $(this).datepicker('getDate');
var maxDate = new Date(date.getMonth() + 3);
$( "#to" ).datepicker( "option", "maxDate", maxDate );
}
});
$( "#to" ).datepicker({
maxDate: 0,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
}
You can get the month from From datepicker and increment to 3 months for maxDate of the To datepicker.
$("#from").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#from').datepicker('getDate');
date2.setMonth(date2.getMonth() + 3);
$('#to').datepicker('setDate', date2);
$('#to').datepicker('option', 'maxDate', date2);
}
});
$('#to').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var from = $('#from').datepicker('getDate');
console.log(from);
var to = $('#to').datepicker('getDate');
if (to <= from) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#from').datepicker('setDate', minDate);
}
}
});
Check this fiddle:
http://jsfiddle.net/PPSh3/586/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With