Question

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-dd)', 
            showAnim: 'fade'
            });

How can I add the blur event, or is there some other event listener I should use?

Answer 1

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.