Reputation: 547
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 'today',
onSelect: function(dateText, inst) {
$('#handout').val(dateText);
}
});
});
$(function(){
$('#datepicker2').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 'today',
onSelect: function(dateText, inst) {
$('#handin').val(dateText);
$('#datepicker').val("");
$('#datepicker').datepicker({'option','minDate', newDate});
}
});
});
I have 2 jQuery calendars, I want to restrict the 2nd calendars date range based on the first calendars selection. So if the first calendar selects 10/07/2014, then the 2nd calendar will update to reflect that no date prior to that date may be selected. I thought the code above in datepicker2 onSelect function would handle this however it doesn't seem to.
FIXED WITH THIS SOLUTION:
Fixed it with the following:
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 'today',
onSelect: function(dateText, inst) {
$('#handout').val(dateText);
$( "#datepicker2" ).datepicker( "option", "minDate", dateText );
}
});
});
$(function(){
$('#datepicker2').datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
$('#handin').val(dateText);
$( "#datepicker" ).datepicker( "option", "maxDate", dateText );
}
});
});
Refer to: http://jqueryui.com/datepicker/#date-range
Upvotes: 0
Views: 1897
Reputation: 19
You can find answer in following example by SirDerpington.
here is two text boxes.
<input type="text" id="dt1" readonly="readonly">
<input type="text" id="dt2" readonly="readonly">
Here is jquery datepicker initializer.
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#dt2').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#dt2').datepicker('option', 'minDate', date2);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
Please see example in jsfiddle.
Upvotes: 1