End date must be after start date (jquery for noobs)

Question

I'm having a heck of a time wrapping my head around JQuery syntax (probably because my javascript isn't that solid to begin with). Here's my problem. I'm using datepicker on two input boxes (#ev_start and #ev_end) #ev_end must occur after #ev_start.

HTML

Event Start <input type='text' name='ev_start' id='ev_start'/>
Event End   <input type='text' name='ev_end' id='ev_start'/>

JQuery that works

$(document).ready(function(){
    //DATE/TIME INFO
    $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', firstDay: 1  });

    $(function() {
     $("#ev_start").datepicker({showOn: 'button', 
              buttonImage: 'images/jquery_ui/calendar.gif', 
              buttonImageOnly: true
            });
    });

    $(function() {//display Calendar
     $("#ev_end").datepicker({showOn: 'button', 
            buttonImage: 'images/jquery_ui/calendar.gif', 
            buttonImageOnly: true
           });
});

JQuery that is supposed to set the mindate on ev_end's datepicker, but doesn't:

$("#ev_start").live('blur',
                    function(){
                      $('#ev_end').datepicker('option', 'minDate', $('#ev_start').datepicker( 'getDate' ))
                    });//inside the $(document).ready(function())

I'm hoping someone can explain both why the the above doesn't work and what would work and why.

Thanks!

Answer 1

You cannot do that with some jQuery built-in method. It's a possible solution to make you own method to check that.

Answer 2

The answer is to modify the datepicker for #ev_end in the initial function:

$(function() {//display Calendar
 $("#ev_end").datepicker({showOn: 'both', 
        buttonImage: 'images/jquery_ui/calendar.gif', 
        buttonImageOnly: true,
        beforeShow: function() { 
        var d=$("#ev_start").datepicker('getDate');
        if(d) return {minDate: d}
        }
       });
});