JQuery UI Datepicker，在下拉菜单中颠倒年份的顺序

Posted 2023-05-07

【中文标题】JQuery UI Datepicker，在下拉菜单中颠倒年份的顺序

【英文标题】：JQuery UI Datepicker, reverse the order of the year in the dropdowns

【发布时间】：2010-12-08 08:52:47

【问题描述】：

我有一个带有 changeyear: true 的日期选择器。 “年份”下拉菜单将标题显示为 2009，然后标题下方的下一年不是 2008、2007、2006 等等，而是从 1999 开始并向上计数。我似乎找不到一个简单的解决方案来颠倒这个顺序？

【问题讨论】：

我真的很讨厌用于选择年份的下拉菜单的可用性差，通常建议避免使用它们。原因如下：useit.com/alertbox/20001112.html.

这是一个日历弹出窗口，它实际上为用户提供了三个选项，要么自己输入（那篇文章中推荐），要么从弹出日历中选择它，或者使用下拉菜单选择那一年。我很确定这是一个可用的解决方案！

【参考方案1】：

我不建议按照Cuong 的建议编辑原始 ui.datepicker.js，因为在发布新版本时，一旦您或其他开发人员替换文件，您的更改就会丢失。记住为了重新申请而进行的定制是不切实际的。相反，您可以在自己的单独 JS 中覆盖现有的 _generateMonthYearHeader 方法，如下所示：

// store original so we can call it inside our overriding method
$.datepicker._generateMonthYearHeader_original = $.datepicker._generateMonthYearHeader;

$.datepicker._generateMonthYearHeader = function(inst, dm, dy, mnd, mxd, s, mn, mns) 
  var header = $($.datepicker._generateMonthYearHeader_original(inst, dm, dy, mnd, mxd, s, mn, mns)),
      years = header.find('.ui-datepicker-year');

  // reverse the years
  years.html(Array.prototype.reverse.apply(years.children()));

  // return our new html
  return $('<div />').append(header).html();

我只是为我正在做的事情写这个，它很好地完成了这个把戏:)

【讨论】：

// 添加以下 if 条件。否则，当不是下拉菜单时，不会显示年份。 if(years.is('select')) years.html(Array.prototype.reverse.apply(years.children()));

【参考方案2】：

我认为破解插件而不破解插件的最佳方法是将事件处理程序分配给年份选择项。

//Hack for reverting year order
$(document.body).delegate('select.ui-datepicker-year', 'mousedown', function() 
  (function(sel) 
    var el = $(sel);
    var ops = $(el).children().get();
    if ( ops.length > 0 && $(ops).first().val() < $(ops).last().val() ) 
      $(el).empty();
      $(el).html(ops.reverse());
    
  )(this);
);

这段代码必须能正常工作！ :P

【参考方案3】：

有一种“方法”可以让年份从最后一个日期开始：

dateFormat: 'mm/dd/yy',
changeMonth: true, 
changeYear: true,  
yearRange: "-70:", 
maxDate: "-13Y"

如果使用yearRange 作为固定年份yearRange: "1900:-13"，最好自下而上使用："-70:"，并设置maxDate。现在我的年份选择框从 2004 年开始，而不是 1900 年。

P.S：所有其他解决方案都已经过测试。它们非常慢，而且有些效果不太好（尤其是旧的 - 例如设置当前年份而不是 2004 年）。

【参考方案4】：

我有一个答案，但可能不是你想听到的。

在互联网上搜索了一个可以颠倒下拉列表中年份顺序的解决方案后，我得出了这个结论：

    changeMonth: true
    , changeYear: true
    , yearRange: '-65:'
    , maxDate: '1999/12/31'

这将预先选择最大日期，因此选择年份您将自动看到最后一个条目，从而能够向上滚动以选择更早的日期。

编辑：yearRange 是任意添加的，以创建 65 年前的起点。 maxDate 也是任意选择的，作为撰写此评论之前 12 年的日期。基本上，这个菜单允许人们选择 12 到 65 岁之间的年龄。

这并不理想，但效果很好。

【参考方案5】：

打开文件ui.datepicker.js 找到方法_generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate, selectedDate, secondary, monthNames, monthNamesShort)

在方法中找到如下循环

for (; year <= endYear; year++) 
    html += '<option value="' + year + '"' +
        (year == drawYear ? ' selected="selected"' : '') +
        '>' + year + '</option>';


html += '</select>';

在该循环之前插入以下代码：

if (year-100 < 1900) // Check year is lower then 1900
    year = 1950;     // change start point of above loop, it helps you having the 
                     // year's dropdownlist starting at 1950, and ending of current year plus 10.

【参考方案6】：

将for 循环的第一行替换为：

var minYear = year;
year = endYear;
for (; year >= minYear; year--)