如何实现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>
后续尝试两种方法均未成功:
- 以下代码仅在下拉列表中显示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; } }); });
- 以下代码年份范围仍为正序,且发现当前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
相关产品推荐
相关产品推荐

