You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现jQuery UI Datepicker年份倒序显示?

jQuery UI Datepicker年份下拉框倒序显示问题

使用jQuery JavaScript Library v3.6.4及jQuery UI v1.13.2,尝试实现Datepicker年份下拉框倒序展示(如2023,2022…2010),但现有代码实际显示为正序(2010,2011…2023),初始完整代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
                      firstDay: 0, // set first day of week as monday
                      changeMonth: true,
                      changeYear: true,
                      dateFormat: 'mm/dd/yy',
                      showButtonPanel: true,
                      showOtherMonths: true,

beforeShow: function(input, inst) {
  // Get the current year
  var currentYear = (new Date()).getFullYear();

  // it only show the 2023 on dropdown listbox
  var yearRange = "";
  for (var i = currentYear; i >= 2010; i--) {
    yearRange += i + ":";
  }
  yearRange = yearRange.slice(0, -1);

  // Set the year range
  inst.settings.yearRange = yearRange;
  }
 });
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

后续尝试两种方法均未成功:

  1. 以下代码仅在下拉列表中显示2023:
$(function () {
            $(calID, window.opener)
                  .datepicker(
                  {
                      firstDay: 0, // set first day of week as monday
                      changeMonth: true,
                      changeYear: true,
                      dateFormat: 'mm/dd/yy',
                      showButtonPanel: true,
                      showOtherMonths: true,

beforeShow: function(input, inst) {
  // Get the current year
  var currentYear = (new Date()).getFullYear();

  // it only show the 2023 on dropdown listbox
  var yearRange = "";
  for (var i = currentYear; i >= 2010; i--) {
    yearRange += i + ":";
  }
  yearRange = yearRange.slice(0, -1);

  // Set the year range
  inst.settings.yearRange = yearRange;
  }
 });
});
  1. 以下代码年份范围仍为正序,且发现当前jQuery UI无reverseYearRange属性:
$(function () {
            $(calID, window.opener)
                  .datepicker(
                  {
                      firstDay: 0, // set first day of week as monday
                      changeMonth: true,
                      changeYear: true,
                      dateFormat: 'mm/dd/yy',
                      showButtonPanel: true,
                      showOtherMonths: true,
                      
                      beforeShow: function(input, inst) {
                       var currentYear = (new Date()).getFullYear();
                      inst.settings.yearRange = "2010:" + currentYear;

                      // Set the reverse year range; I found that the current jquery.Ui doesn't has reverseYearRange.

                      inst.settings.reverseYearRange = true;
                      }
     });
 });

恳请告知实现jQuery UI Datepicker年份倒序显示的可行方案。


内容的提问来源于stack exchange,提问作者user819774

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.20 14:23:13