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

Posted 2023-05-08

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

【英文标题】：DatePicker not setting Year unless dropdown is changed explicitly when original Year is outside dropdown range

【发布时间】：2021-06-27 17:08:09

【问题描述】：

我已经使用以下代码设置了一个 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

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

【参考方案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"

【讨论】：

手动将日期 01/01/1900 写入任何文本框中。然后单击它以设置日期。现在单击文本框以显示日历。您会注意到年份下拉菜单显示 2020。不要触摸该下拉菜单 - 只需单击其中一个日期，例如18 日。日期现在将设置为 01/18/1900。在那种确切的情况下，我希望将其设置为 01/18/2020。目前通过 UI 获得该信息的唯一方法是将年份下拉菜单更改为不同的年份，然后在点击某一天之前返回 2020。

@Sperick 这确实发生了，我可以看到问题发生在任何一年，例如1900 或 2000。我的第一个问题是期望用户输入错误年份的频率（2020 年和 2030 年之外）？手动输入日期是一种变化；所以需要一个回调来帮助防止用户输入超出范围的日期。

@Sperick 请查看答案更新。

谢谢。我可能应该指定这是一个编辑文本框，默认加载了“01/01/1900”或“12/31/999”

【参考方案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"。就是这样。

【讨论】：

我使用的 DatePickers 看起来不同。它们看起来就像@Twisty 在他的回答中所说的那样。它必须是框架的版本，因为我们的代码 sn-ps 完全相同。看看我对他的回答的回应。我需要保持它们的外观和现在一样，所以我不能接受你所拥有的