在日期选择器中选择日期答案

【问题标题】：Selecting a date in datepicker在日期选择器中选择日期
【发布时间】：2021-07-28 04:10:12
【问题描述】：

如果您在第一个日期选择器中选择 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>

【问题讨论】：

您使用的是哪个日期选择器？ fengyuanchen/datepicker 似乎没有“onSelect”事件。您可能正在使用jQuery UI datepicker widget？
@showdev 是的，jQuery UI datepicker，问题是 dd.mm.yy 格式破坏了脚本
你看到这个Demo了吗：jqueryui.com/datepicker/#date-range

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

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

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

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

$.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>

【讨论】：