How to set third min-max relationship for jQuery UI datepicker

Question

在我的应用程序中，我将 jquery datepicker 用于 3 个日期输入，“receiveDate”、“startDate”和“endDate”。我已经通过以下方式将开始日期设置为始终早于结束日期：

$("#WL_StartDate").attr("autocomplete", "off");
        $(function () {
            $("#WL_StartDate").datepicker({
                changeMonth: true,
                changeYear: true,
                onSelect: function (selected) {
                    $("#WL_EndDate").datepicker("option", "minDate", selected)
                },
            });
        });

        $("#WL_EndDate").attr("autocomplete", "off");
        $(function () {
            $("#WL_EndDate").datepicker({
                changeMonth: true,
                changeYear: true,
                onSelect: function (selected) {
                    $("#WL_StartDate").datepicker("option", "maxDate", selected)
                },
            });
        });

现在我希望我的“receiveDate”也总是早于我的“startDate”，我试过：

$("#ReceivedDate").attr("autocomplete", "off");
        $(function () {
            $("#ReceivedDate").datepicker({                   
                maxDate: '0',
                changeMonth: true,
                changeYear: true,
                onSelect: function (selected) {
                    $("#WL_StartDate").datepicker("option", "minDate", selected)
                },
            });
            });
        });

但不工作，谁能给我一些想法？谢谢！

Answer 1

考虑以下内容。

$(function() {
  $("#receivedDate, #startDate, #endDate").attr("autocomplete", "off");

  $("#receivedDate").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(selected) {
      $("#startDate").datepicker("option", "minDate", selected);
      $("#endDate").datepicker("option", "minDate", selected);
    }
  });

  $("#startDate").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(selected) {
      $("#receivedDate").datepicker("option", "maxDate", selected);
      $("#endDate").datepicker("option", "minDate", selected);
    }
  });

  $("#endDate").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(selected) {
      $("#receivedDate").datepicker("option", "maxDate", selected);
      $("#startDate").datepicker("option", "maxDate", selected);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div>
  <label for="receivedDate">Received:</label><input type="text" id="receivedDate">
  <label for="startDate">Start:</label><input type="text" id="startDate">
  <label for="endDate">End:</label><input type="text" id="endDate">
</div>

您不需要将代码的每一部分都包装在它自己的函数中。只需一个即可执行所有代码。

如果您正在应用相同的操作或设置，使用正确的选择器将允许您定位更多元素。