Question

I am using kelvin lucks jquery date picker.

I have a start and end date picker set up so that when the start date is selected it assigns that same date to the end date and the end date insures that its calendar does not allow selecting of any dates before the start date.

Works great except if you select the end date without touching the start date you are able to set an end date before the start date. Not good!

$(function()
{
    $('.date-pick').datePicker({startDate:'2000-01-01', clickInput:true})

        $('#start-date').bind('dpClosed', function(e, selectedDates) {
                var d = selectedDates[0];
                if (d) {
            d = new Date(d);
            $('#end-date').dpSetStartDate(d.addDays(0).asString()).dpSetSelected(d.asString()).val($(this).val());
        }
    });
});

Because I am prefilling the input fields using PHP, all I want to do is trigger $('#end-date').dpSetStartDate so that the end date updates when the document loads. At the moment it only updates on $('#start-date').bind('dpClosed', function(e, selectedDates) {

How do I do this?

Thanks,

Tim

Answer 1

You can’t just trigger the event unfortunately, because you’re trying on selectedDates from the arguments…however there’s another way to get that data: $('#start-date').dpGetSelected(). By using this you can then .trigger() the event whenever you want (immediately) to update the #end-date range, like this:

$(function() {
    $('.date-pick').datePicker({startDate:'2000-01-01', clickInput:true});
    $('#start-date').bind('dpClosed', function(e, selectedDates) {
      var d = $('#start-date').dpGetSelected()[0];
      if (d) {
       d = new Date(d);
       $('#end-date').dpSetStartDate(d.addDays(0).asString()).dpSetSelected(d.asString()).val($(this).val());
     }
   }).trigger('dpClosed'); //call that event handler we just bound
});

You can test it out here.