jquery 日期选择器中的疯狂行为

Question

我的 RoR 应用程序中有 2 个来自 jquery1.8.1.min.js 的 jquery 日期选择器实例。

我有这个功能：

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

与此输入相关：

<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">

那我就有这个功能了：

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

与此输入相关：

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

两个输入都是由 ruby​​ 表单助手生成的：

这是第一个表单助手：

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

这是第二个表单助手：

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

问题：为什么第一个输入被正确限制（IE你不能选择过去的一天，它只会让你进入未来90天）而第二个输入完全没有被限制？

---

Answer 1

这一行：

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

初始化第二个输入（id="act_event_ends_on" 的那个），因为它具有date-picker 类并且没有policy_starts_on id。

因此，这个元素已经被初始化了，下面的代码将不再为你做任何事情：

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

解决方案：

我的建议是为异常提供特殊的类名（即“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">

然后您可以执行以下操作：

$(".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

只是为了实验，如果您以相反的顺序声明这些日期选择器设置，是否会发生相反的行为？如果另一个坏了，那么你可以断定 datepicker 有一个错误（这不太可能）。否则，您需要查看自己的代码。

另外，请注意，您在每个块之前都添加了如下内容：

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

意思是选择除一个特定日期之外的所有日期选择器。

所以下次你设置一个时，它已经被说出来了。尝试删除那些单线，你会得到：

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

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