Question

如果您在第一个日期选择器中选择 06.05.2021，那么第二个日期选择器不应选择 06.05.2021 之前的任何内容。该脚本使用 yy-mm-dd 格式。 dd.mm.yy 格式不起作用。如何解决？

格式“yy-mm-dd”有效：

$("#start").datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: new Date(),
  maxDate: '+2y',
  onSelect: function(date) {

    var selectedDate = new Date(date);
    var msecsInADay = 86400000;
    var endDate = new Date(selectedDate.getTime() + msecsInADay);

    $("#end").datepicker("option", "minDate", endDate);
    $("#end").datepicker("option", "maxDate", '+2y');

  }
});

$("#end").datepicker({
  dateFormat: 'yy-mm-dd'
});

<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.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<p>Start: <input type="text" id="start"></p>
<p>End: <input type="text" id="end"></p>

格式“dd.mm.yy”不起作用：

$("#start").datepicker({
  dateFormat: 'dd.mm.yy',
  minDate: new Date(),
  maxDate: '+2y',
  onSelect: function(date) {

    var selectedDate = new Date(date);
    var msecsInADay = 86400000;
    var endDate = new Date(selectedDate.getTime() + msecsInADay);

    $("#end").datepicker("option", "minDate", endDate);
    $("#end").datepicker("option", "maxDate", '+2y');

  }
});

$("#end").datepicker({
  dateFormat: 'dd.mm.yy'
});

<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.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<p>Start: <input type="text" id="start"></p>
<p>End: <input type="text" id="end"></p>

Answer 1

JavaScript 的 Date() constructor 无法识别格式“dd.mm.yy”。
因此，selectedDate 将是 null。

console.log(new Date('15.04.2021'));

一种解决方案是将字符串解析为可识别的时间戳。
下面，我正在使用 datepicker's parseDate() 函数：

<块引用>

$.datepicker.parseDate( 格式、值、选项)
从具有指定格式的字符串值中提取日期。

const msecsInADay = 86400000;

const $pickEnd = $("#end").datepicker({
  dateFormat: 'dd.mm.yy'
});

$("#start").datepicker({
  dateFormat: 'dd.mm.yy',
  minDate: new Date(),
  maxDate: '+2y',
  onSelect: function(date) {

    let parsedDate = $.datepicker.parseDate('dd.mm.yy', date);
    let selectedDate = new Date(parsedDate);
    let endDate = new Date(selectedDate.getTime() + msecsInADay);

    $pickEnd.datepicker('option', {
      'minDate': endDate,
      'maxDate': '+2y'
    });

  }
});

<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.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<p>Start: <input type="text" id="start"></p>
<p>End: <input type="text" id="end"></p>

在日期选择器中选择日期

1 个答案: