Datepicker 的动态年份范围
Posted
技术标签:
【中文标题】Datepicker 的动态年份范围【英文标题】：Dynamic year range for Datepicker 【发布时间】：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 年。
谢谢。
【问题讨论】：
【参考方案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 的范围。对吗？跨度>以上是关于Datepicker 的动态年份范围的主要内容，如果未能解决你的问题，请参考以下文章
如何在输入 Bootstrap Datepicker 中显示年份范围？
DatePicker 不设置年份，除非当原始年份超出下拉范围时显式更改下拉列表
如何使用 jQuery Datepicker 动态应用 setDate 和（minDate 和 maxDate）日期范围？
ElementUI 之 DatePicker 年份选择限制范围 disabledDate