Crazy behavior in jquery date-picker

Question

I have 2 different instances of the jquery date-picker from jquery1.8.1.min.js in my RoR application.

I have this function:

    $(".date-picker:not('#policy_starts_on')").datepicker();
    $('#policy_starts_on.date-picker').datepicker({
        startDate: '0',
        endDate: '+90d'
    });

Which goes with this input:

<input class="required  date-picker input-small align-center" id="policy_starts_on" name="policy[starts_on]" size="30" type="text" value="02/27/2013">

Then I have this function:

    $(".date-picker:not('#act_event_ends_on')").datepicker();
    $('#act_event_ends_on.date-picker').datepicker({
        startDate: '0',
        endDate: '+180d'
    });

Which goes with this input:

<input class="required date-picker input-small align-center" id="act_event_ends_on" name="act_event[ends_on]" size="30" type="text">

Both inputs are being generated by ruby form helpers:

This being the first form helper:

= f.input :starts_on, :label => 'Policy Start Date', :required => true

And this is the second form helper:

= f.input :ends_on, :label => 'Event End Date', :required => true 

Question: Why is the first input being restricted properly (IE you can't pick a day in the past and it will only allow you to go 90 days into the future) while the second input is not being restricted at all?

---

Answer 1

This line:

$(".date-picker:not('#policy_starts_on')").datepicker();

initializes the second input (the one with id="act_event_ends_on"), because it has the date-picker class and does not have the policy_starts_on id.

As a result, this element has already been initialized and the following code will not do anything for you any more:

$('#act_event_ends_on.date-picker').datepicker({
    startDate: '0',
    endDate: '+180d'
});

SOLUTION:

My recommendation would be to give the exceptions special class names (ie "date-picker-special"):

<input class="required  date-picker date-picker-special input-small align-center" id="policy_starts_on" name="policy[starts_on]" size="30" type="text" value="02/27/2013">

<input class="required date-picker date-picker-special input-small align-center" id="act_event_ends_on" name="act_event[ends_on]" size="30" type="text">

Then you can do the following:

$(".date-picker:not('.date-picker-special')").datepicker();
$('#policy_starts_on.date-picker').datepicker({
    startDate: '0',
    endDate: '+90d'
});
$('#act_event_ends_on.date-picker').datepicker({
    startDate: '0',
    endDate: '+180d'
});

Answer 2

just for the sake of experimentation, does the opposite behavior happen if you declare those datepicker setups in the opposite order? if the opposite one breaks, then you could conclude that datepicker has a bug (which is unlikely). otherwise, you'd need to look at your own code.

also, note that you've preceded each block with something like this:

$(".date-picker:not('#policy_starts_on')").datepicker();

which is saying to select ALL date pickers except that one particular one.

so next time you set one up, its already been spoken for. try removing those one-liners, and you are left with:

$('#policy_starts_on.date-picker').datepicker({
    startDate: '0',
    endDate: '+90d'
});

$('#act_event_ends_on.date-picker').datepicker({
    startDate: '0',
    endDate: '+180d'
});