如何在输入 Bootstrap Datepicker 中显示年份范围?
How display years range in input Bootstrap Datepicker?
我正在使用以下代码显示年份范围:
$('.date-own').datepicker({
format: " yyyy",
viewMode: "years",
minViewMode: "years",
autoclose: true,
startView: 2,
yearRange: '1950:2011'
});
但是范围没有来。
我只需要 1950 年到 2010 年之间的年份,我该如何解决这个问题?
在你的日期选择器中,你可以使用 startDate
和 endDate
并且你可以指定从现在开始多少年,即:1950-2021 = -71y
设置 startDate 和其他 .
演示代码 :
$('.date-own').datepicker({
format: "yyyy",
viewMode: "years",
updateViewDate: true,
minViewMode: "years",
autoclose: true,
startView: 2,
defaultViewDate: {
year: '1950'
},
startDate: '-71y', //2021 -1950
endDate: '-10y' //2021-2011
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<input type="text" class="date-own">
我正在使用以下代码显示年份范围:
$('.date-own').datepicker({
format: " yyyy",
viewMode: "years",
minViewMode: "years",
autoclose: true,
startView: 2,
yearRange: '1950:2011'
});
但是范围没有来。
我只需要 1950 年到 2010 年之间的年份,我该如何解决这个问题?
在你的日期选择器中,你可以使用 startDate
和 endDate
并且你可以指定从现在开始多少年,即:1950-2021 = -71y
设置 startDate 和其他 .
演示代码 :
$('.date-own').datepicker({
format: "yyyy",
viewMode: "years",
updateViewDate: true,
minViewMode: "years",
autoclose: true,
startView: 2,
defaultViewDate: {
year: '1950'
},
startDate: '-71y', //2021 -1950
endDate: '-10y' //2021-2011
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<input type="text" class="date-own">