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正确。试试吧！

显然，用户体验不是很好:-)快速解决方法是在初始化datepicker后立即调用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);

虽然刚试过看起来像点击处理程序干扰了datepicker但它没有正确显示。如果用户选择min_date_for_itv，最好是在更改输入时触发对日期选择器的更新：

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

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

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

2 个答案: