Datepicker

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

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

如果换行

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

到

$("this").datepicker({

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

Answer 2

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

显然这不是很好的用户体验 :-) 一个快速的解决方法是在初始化日期选择器后立即调用 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:

发生变化时触发对日期选择器的更新

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

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

Datepicker - set minDate based on the value of another element

jquery

jquery-ui-datepicker