Using jQuery and jQueryui to set the minimum date in a datepicker
I'm using the following jquery and jqueryui to take the value of the first datepicker and make it the minimum of the second -- but I think I need to chain it to a blur event to make sure that as the #project_start
changes, the variable changes. I just can't figure out how to do that. When I add the .blur to the end of the first code section, it all stops working.
$( "#project_start" ).datepicker({
dateFormat: 'yy-mm-dd',
appendText: '(yyyy-mm-dd)',
showAnim: 'fade'
})
var start = $("#project_start").val();
$( "#project_end" ).datepicker({
dateFormat: 'yy-mm-dd',
minDate: start,
appendText: '(yyyy-mm开发者_StackOverflow社区-dd)',
showAnim: 'fade'
});
How can I add the blur event, or is there some other event listener I should use?
I think you want to use the onSelect
event from #project_start
to set the minimum date on #project_end
:
$("#project_start").datepicker({
dateFormat: 'yy-mm-dd',
appendText: '(yyyy-mm-dd)',
showAnim: 'fade',
onSelect: function(date) {
$('#project_end').datepicker(
'option',
'minDate',
date
);
}
});
Demo: http://jsfiddle.net/ambiguous/9xxVk/1/
When a date is chosen in the "start" datepicker, the above will set the minDate
option on the second calendar to the chosen date.
There's a demo at JQuery UI page: http://jqueryui.com/demos/datepicker/#date-range
精彩评论