DatePicker 不设置年份，除非当原始年份超出下拉范围时显式更改下拉列表

Question

我已经使用以下代码设置了一个 JQuery DatePicker：

       $('input[data-type="calendar"]').each(function ()
        {
            $(this).datepicker(
            {

                dateFormat: 'mm/dd/yy',
                yearRange: "-1:+10",
                changeMonth: true,
                changeYear: true,
                buttonText: "Select date",
                showOn: "both",
                buttonImage: "../Images/calendar.jpg",
                buttonImageOnly: true,
                setDate: "-0d",
                defaultDate: 0
            });
        });

这样做的问题是，如果日期选择器中的原始日期的年份超出年份下拉列表的范围（2020-2031），那么如果我只使用日历更改日期，则年份不会更改为默认下拉年份 (2020)。

示例：文本框中的日期是 01/01/1900

我打开日历。月份下拉菜单显示“Jan”，年份下拉菜单显示“2020”。

我不会改变其中任何一个。相反，我将日期更改为每月 15 日。

我想要什么：日期是 01/15/2020

实际显示的内容：01/15/1900

我需要做什么才能让日期使用下拉列表中的当前值，而无需将年份更改为其他年份并再次返回？

Answer 1

我无法重现您描述的问题。考虑以下我构建的示例。

$(function() {
  $('input[data-type="calendar"]').each(function(i, el) {
    $(el).datepicker({
      dateFormat: 'mm/dd/yy',
      yearRange: "-1:+10",
      changeMonth: true,
      changeYear: true,
      buttonText: "Select date",
      showOn: "both",
      buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      setDate: "-0d",
      defaultDate: 0,
      minDate: "01/01/2020",
      maxDate: "12/31/2030"
    });
    $(el).datepicker("setDate", new Date());
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <p>Date 1: <input type="text" id="datepicker-1" data-type="calendar" /></p>
</div>
<div>
  <p>Date 2: <input type="text" id="datepicker-2" data-type="calendar" /></p>
</div>
<div>
  <p>Date 3: <input type="text" id="datepicker-3" data-type="calendar" /></p>
</div>

所有日期均显示为今天，03/31/2021。

这将使用浏览器中的日期。浏览器从操作系统获取日期。您可能需要确保在您的测试设备上正确配置了日期和时间。

更新

要进一步限制范围，您需要添加 minDate 和 maxDate 选项。

dateFormat 选项定义的格式的字符串，或相对日期。相对日期必须包含值和周期对；有效期间是 "y" 年，"m" 月，"w" 周，"d" 日。例如，"+1m +7d" 表示从今天起 1 个月零 7 天。

如果用户手动输入日期，然后在 UI 中单击日期，它将返回正确的年份。

  minDate: "01/01/2020",
  maxDate: "12/31/2030"

Answer 2

$(function() {
  $('input[data-type="calendar"]').each(function(i, el) {
    $(el).datepicker({
      dateFormat: 'mm/dd/yy',
      yearRange: "-150:+0",
      changeMonth: true,
      changeYear: true,
      buttonText: "Select date",
      showOn: "both",
      buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      setDate: "-0d",
      defaultDate: 0
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <p>Date 1: <input type="text" id="datepicker-1" data-type="calendar" /></p>
</div>
<div>
  <p>Date 2: <input type="text" id="datepicker-2" data-type="calendar" /></p>
</div>
<div>
  <p>Date 3: <input type="text" id="datepicker-3" data-type="calendar" /></p>
</div>

将 yearRange 更改为 yearRange: "-150:+0"。就是这样。