I have put two datepikcer from date and to date in my webpage for generate report. I want to apply validation on both datepicker for selection of date. I have write common jquery code for set minimum and maximum date of both datepikcer but it did not work for me. I have also write code for set minimum and maximum date on close of datepicker.
My requirement is that I want to set minimum and maximum date dynamically when datepicker is initialize. Then after also set another maximum and minimum date when user can select date from any datepicker
$("#frm_date").datepicker({
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
dateFormat:'yy-mm-dd',
onClose: function( selectedDate ) {
$( "#to_date" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#to_date").datepicker({
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
dateFormat:'yy-mm-dd',
onClose: function( selectedDate ) {
$("#frm_date" ).datepicker( "option", "maxDate", selectedDate );
}
});
$(".datepick").datepicker({dateFormat:'yy-mm-dd',minDate:'2013-09-10' ,maxDate:'2013-10-10'});
I have solved my problem using below code.
Also see below solution on jquery forum site. https://forum.jquery.com/topic/how-to-set-minimum-and-maximum-date-dynamically-in-jquery-ui-date-picker
$.datepicker.setDefaults({
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
minDate: '2013-09-10',
maxDate: '2013-10-10'
});
$('#frm_date').datepicker({
onSelect: function(selectedDate) {
$('#to_date').datepicker('option', 'minDate', selectedDate || '2013-09-10');
}
});
$('#to_date').datepicker({
onSelect: function(selectedDate) {
$('#frm_date').datepicker('option', 'maxDate', selectedDate || '2013-10-10');
}
});
$(".datepick").datepicker({dateFormat:'yy-mm-dd',minDate:'2013-09-10' ,maxDate:'2013-10-10'});
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