Datepicker 的动态年份范围答案

【问题标题】：Dynamic year range for DatepickerDatepicker 的动态年份范围
【发布时间】：2018-06-09 15:09:53
【问题描述】：

我正在使用 Datepicker 来选择到期日期。我希望我的日期选择器有年份选项：

当我们加载日期选择器时，它的年份选项应该从当年开始，到当年之后的 20 年结束。它不应显示当前年份的前一年。例如：当前年份 = 2017，因此 datepicker 将显示从 2017 到 2037 的年份范围。
当我们选择诸如 2037 之类的年份时，我的日期选择器应显示 2027 到 2047 的年份选项范围

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
      minDate: 0,
      changeMonth: true,
      changeYear: true
    });
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

我能够从当年开始获得年份选项，并且没有当年之前的年份选项，但我的选项只包含当年之后的 10 年。我需要它是从当年开始的 20 年。

谢谢。

【问题讨论】：

标签： javascript jquery ruby-on-rails jquery-ui datepicker

【解决方案1】：

$('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: new Date().getFullYear() + ':+20',
    onChangeMonthYear: function(year, month, inst) {

        if(year !== inst.currentYear) {
            var newYear = year;
            $('#datepicker').datepicker('option', 'yearRange', (newYear-10) + ':' + (newYear + 10));
            $('#datepicker').datepicker('option', 'defaultDate','01/01/' + newYear);

        }
    }
});

【讨论】：

我不想限制我的年份范围。它只会给出从 2027 年到 2047 年的年份。如果我想选择 2017 年怎么办
但是你在问题中问，当用户选择 2037 时，datepicker 应该显示 2027 到 2047。你到底需要什么？
是的，但是，我必须要求，首先当我输入日期选择器时，它应该显示从 2017 年到 2037 年的年份范围。当我为 ex 选择任何年份时。点击2027，再次勾选年份范围选项，就是2017到2037，点击2037，再勾选年份范围选项，就是2027到2047等等……
我已经编辑了我的答案。检查它是否符合您的要求
谢谢，但日期选择器选择了不同的值。实际上是 10 年前，请纠正，我是 jquery 的新手。

【解决方案2】：

试试这个例子，它不会允许过去几年：

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.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>
    <script>
    </script>
</head>
<body>

    <p>Date: <input type="text" id="datepicker"></p>

    <script>
        var now = new Date(),
            year_offset = 20,
            start = now.getFullYear(),
            end = now.getFullYear() + year_offset;

        var onChangeMonthYear = function( year, month, inst ) {
            start   = ( year - (year_offset / 2) < now.getFullYear() ) ? now.getFullYear() : year - (year_offset / 2);
            end     = start + year_offset;
            inst.settings.yearRange = parseInt( start ) + ":" + parseInt( end );
        }

        $("#datepicker").datepicker({
            minDate: 0,
            changeMonth: true,
            changeYear: true,
            yearRange: start + ":" + end,
            onChangeMonthYear: onChangeMonthYear
        });
    </script>

</body>
</html>

【讨论】：

当我选择一年时，我没有得到选择前 10 年和选择后 10 年的年份范围。我从选定的年份开始获得 20 年。
对不起。但这有点是我想要的，但不是正确的。如果我选择任何一年，我应该得到所选年份的前 10 年和后 10 年。比如我选择2030，范围应该是2020到2030
好的，我得到了你需要的，再试一次。我花了一段时间来解决事件传播问题。我已经有一段时间没有使用 jQuery了。

【解决方案3】：

试试这个

$(function () {

 $('#datepicker2').datepicker({
     changeMonth: true,
     changeYear: true,
     minDate: 0,
     yearRange: 'c-10:c+20',

 }); });

【讨论】：

我不想限制我的年份范围。
它只会给出从 2017 到 2037 的年份。如果我想选择 2047 怎么办
你的第二点不清楚。你能再澄清一下吗？
我想要日期选择器的默认功能。请运行代码spinet，看看我们得到的年度初始选项是什么。你会发现它是 2017 到 2027。点击 2027，再次检查年份范围选项，它将是从 2017 到 2037，点击 2037，再次检查年份范围选项，它将是从 2027 到 2047 和等等……
据我了解，当用户第一次点击它时，您需要在 datepicker 中使用下一个 20 年，现在假设他选择 2037 现在 datepicker 将显示从 2027 到 2047 的范围。对吗？跨度>