3

我在一页中有多个日期选择器。我使用类名来设置诸如出现之类的选项。

$('.datepickers').datepicker({
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        showWeek: true
});

然后，我想为其中两个设置 onSelect 事件。

$('#to').datepicker({
    onSelect: function(selectedDate) {
        $('#from').datepicker("option", "minDate", selectedDate);
    }
});

其他类似的 onSelect 事件设置。

但是，这行不通。除了通过 id 单独设置所有选项之外，有关如何解决此问题的任何建议？

4

2 回答 2

1

我在这里创建了一个功能演示来展示一个可能的解决方案：

点击 jsfiddle

您不必创建多个日期选择器方法。只需使用“onSelect”方法即可：

  1. 测试当前日期选择器是否有“#to”
  2. 如果是这样，请使用此日期选择器中的“dateText”值来初始化“#from”日期选择器
  3. 使用当前的“inst”值将 dom 遍历到“#from”日期选择器并设置它的值。

这些是关键线：

onSelect: function(dateText, inst) {
   if(inst.id === 'to'){
     $('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
  }          
}
于 2012-06-20T02:02:55.490 回答
1

您是否尝试过以下语法？您不想再次 _init 日期选择器小部件。您只想更改一个选项。这是使用 jquery ui 小部件执行此操作的方法。

    $('#to').datepicker('option', 'onSelect', function(selectedDate) {
            $('#from').datepicker("option", "minDate", selectedDate);
        });
于 2012-06-20T10:12:16.567 回答