除非在原始年份超出下拉范围时明确更改下拉列表，否则 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

我打开日历。月份下拉列表显示“一月”，年份下拉列表显示“2020”。

我不改变他们中的任何一个。相反，我将日期更改为该月的 15 日。

我想要的：日期为 01/15/2020

实际显示：1900 年 1 月 15 日

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

Answer 1

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

将年份范围更改为年份范围：“-150:+0”。就这样吧。

Answer 2

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

$(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。

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

更新

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

A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

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

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

除非在原始年份超出下拉范围时明确更改下拉列表，否则 DatePicker 不会设置年份

DatePicker not setting Year unless dropdown is changed explicitly when original Year is outside dropdown range

jquery

jquery-ui