jQuery UI 多个日期选择器：在按类设置选项后按 id 设置单个事件

Posted 2023-05-07

【中文标题】jQuery UI 多个日期选择器：在按类设置选项后按 id 设置单个事件

【英文标题】：jQuery UI multiple Datepickers: set individual event by id after setting options by class

【发布时间】：2012-06-22 02:26:57

【问题描述】：

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

$('.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 单独设置所有选项之外，关于如何解决此问题的任何建议？

【参考方案1】：

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

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

【讨论】：

它有效。我原来通过 onSelect 是一个事件，所以我不能使用这个方法。我试过 $('#to').datepicker('event', 'onSelect'...，显然它不起作用。

如果您想一次性添加/更改多个选项，请使用$('#from').datepicker("option", minDate: selectedDate, defaultDate: selectedDate);

【参考方案2】：

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

click for the jsfiddle

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

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

这些是关键线：

onSelect: function(dateText, inst) 
   if(inst.id === 'to')
     $('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
            

【讨论】：

感谢您的帮助。我只选择另一个答案是因为我不喜欢每次日期选择器之一是 onSelect 时都调用 if 语句