Datepicker - 根据另一个元素的值设置 minDate

Question

我正在尝试根据另一个元素的值设置 datepicker minDate 属性。

我正在使用这个：

$("input[name='selection_itv_date']").click(function() {

    var min_date_for_itv = $(this).closest('.selection').siblings('.application').find("input[name='job_receiving_date']").val();

    $("input[name='selection_itv_date']").datepicker({
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd M yy",
        firstDay: 1,
        minDate: new Date(min_date_for_itv),
        yearRange: "-1:+0"
    });
});

我需要在点击时获取input[name='job_receiving_date'] 的值，因为我在页面上有多个具有此名称的输入。 我尝试使用onSend，但没有结果。

非常感谢任何帮助。

Answer 1

您当前的代码有效，但需要单击 2 次。那是因为第一次单击只是将输入初始化为日期选择器，仅此而已。如果您然后单击页面，然后单击返回输入，您将看到日期选择器出现，因为它现在是一个日期选择器，并且您的 minDate 正确。试试看！

显然这不是很好的 UX :-) 一个快速的解决方法是在初始化日期选择器后立即调用 the show method：

$("input[name='selection_itv_date']").click(function() {
    var min_date_for_itv = ...
    $("input[name='selection_itv_date']").datepicker({
        ...
    });

    $("input[name='selection_itv_date']").datepicker('show');
});

一个更简洁的选择可能是独立于点击初始化您的日期选择器，例如在文档准备好时，并在点击时更新minDate 选项：

$("input[name='selection_itv_date']").datepicker('option', 'minDate', min_date_for_itv);

尽管刚刚尝试过，点击处理程序似乎干扰了日期选择器并且无法正确显示。如果用户选择 min_date_for_itv，最好是在 that 输入更改时触发对日期选择器的更新：

$("input[name='job_receiving_date']").on('change', function() {
    $("input[name='selection_itv_date']").datepicker('option', 'minDate', min_date_for_itv);
});

顺便说一句，如果您多次使用选择器，最好缓存它：

var $datepicker = $("input[name='selection_itv_date']");

$datepicker.datepicker({ ... });
$datepicker.datepicker('show');
... etc

Answer 2

在您的代码中，一旦单击一个输入，您就会为所有输入设置minDate。您应该为当前单击的输入设置minDate。

如果换行

$("input[name='selection_itv_date']").datepicker({

到

$("this").datepicker({

，它只会为该输入即时创建日期选择器。