基于另一个 datepickers 值的 JQuery datepicker答案

【问题标题】：JQuery datepicker based on another datepickers value基于另一个 datepickers 值的 JQuery datepicker
【发布时间】：2019-07-18 17:18:59
【问题描述】：

我的页面上有一个带有日期选择器的文本框。最初只有一个，但可以动态添加更多。第一个日期选择器设置为用户不能选择今天之前的日期，但可以选择未来的任何日期。

如何设置下一个日期选择器，以便用户无法选择在前一个日期选择器中选择的日期之前的日期？例如：如果今天是 25.02.2019 并且我在第一个日期选择器中选择了 01.03.2019，那么第二个日期选择器应该无法选择 01.03.2019 之前的任何内容。

如果我在第二个日期选择器中选择 10.03.2019，那么下一个生成的日期选择器应该无法选择 10.03.2019 之前的任何内容。

这是我目前所拥有的：

$(".flightDate").datepicker({ minDate: 0 });

$('body').on('focus',
    '.dynamic-flightdate',
    function () {
        $(this).datepicker({
            numberOfMonths: 1,
            firstDay: 1,
            defaultDate: 0,
            minDate: function () {
                $(this).prev(".datepicker").val();
                console.log($(this).prev(".datepicker").val());
            },
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd.mm.yy'
        });
        $(this).datepicker('show');
    });

但它不会在 console.log 调用中带回任何值

【问题讨论】：

添加更多代码。您必须在第一个 DatePicker 的事件内设置新范围，请查看：stackoverflow.com/questions/6471959/…
@Baro 添加了更多内容！我看不到给定的样本对我有什么作用？

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

如果我理解您的目标，这就是我打算如何使用 onSelect 事件的工作示例。

希望对你有所帮助

$(".flightDate").datepicker({
  minDate: 0,
  onSelect: function() {
    $(".dynamic-flightdate").datepicker("option", "disabled", false);
    $(".dynamic-flightdate").datepicker("option","minDate", $(this).datepicker("getDate"))
  }

});


$(".dynamic-flightdate").datepicker({ minDate: 0, disabled: true });


/*
$('body').on('focus',
  '.dynamic-flightdate',
  function() {
    $(this).datepicker({
      numberOfMonths: 1,
      firstDay: 1,
      defaultDate: 0,
      minDate: function() {
        $(this).prev(".datepicker").val();
        console.log($(this).prev(".datepicker").val());
      },
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd.mm.yy'
    });
    $(this).datepicker('show');
  });*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<input type="text" class="flightDate" />
<input type="text" class="dynamic-flightdate" />

【讨论】：