Bootstrap 日期选择器仅显示特定月份
Bootstrap Date picker Display only Specific month
我只想从 bootstrap 日期选择器中获取财政年度(即:2017 年 7 月)并且格式应该是这样的(2017-07-01/ yyyy-mm-dd
)有什么办法可以完成这样的任务吗?。
我搜索了很多但我无法得到这样的结果,在日历中最重要的是我想限制用户不要 select 除了第一个日期选择器的 7 月和第二个日期选择器的 6 月之外的其他月份.
修改dateFormat
属性。您还可以使用相对选择器删除选择器的日期部分。
$("#example").datepicker({
changeYear: true,
defaultDate: new Date(2017,5,03),
dateFormat: 'MM yy',
showButtonPanel: true,
stepMonths: 0,
onSelect: function(selectedDate) {
console.log(selectedDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="example" />
您也可以像这样使用月份的默认日期
var today = new Date();
var startDate = new Date(today.getFullYear(), 6, 1);
var endDate = new Date(today.getFullYear(), 6, 31);
$("#example1").datepicker({
format: "MM yyyy",
minViewMode: 1,
autoclose: true,
startDate: startDate,
endDate: endDate
});
检查这个
使用这些 cdn 文件:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
<script>
$(document).ready(function(){
$( "#month,#month1" ).datepicker({
inline: true,
changeMonth: true,
changeYear: true,
minDate: -20,
maxDate: "+5M +1D"
});
});
</script>
$input = $(".date");
$input.datepicker({
format: "dd-mm-yyyy",
defaultViewDate: {year:2000, month:0, day:1}
});
$input.datepicker("setDate", null);
假设有一个带有 class 日期的输入元素,
现在您正在设置 defaultViewDate 年 2000 月 1 月 1 日
之后, setDate null 将取消选择日期,现在您处于一月日历,没有任何选择的日期。
试试这个
viewMode: "months" 只显示月份和
minViewMode:"months"防止走年
$('#id').datepicker({
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
})
我只想从 bootstrap 日期选择器中获取财政年度(即:2017 年 7 月)并且格式应该是这样的(2017-07-01/ yyyy-mm-dd
)有什么办法可以完成这样的任务吗?。
我搜索了很多但我无法得到这样的结果,在日历中最重要的是我想限制用户不要 select 除了第一个日期选择器的 7 月和第二个日期选择器的 6 月之外的其他月份.
修改dateFormat
属性。您还可以使用相对选择器删除选择器的日期部分。
$("#example").datepicker({
changeYear: true,
defaultDate: new Date(2017,5,03),
dateFormat: 'MM yy',
showButtonPanel: true,
stepMonths: 0,
onSelect: function(selectedDate) {
console.log(selectedDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="example" />
您也可以像这样使用月份的默认日期
var today = new Date();
var startDate = new Date(today.getFullYear(), 6, 1);
var endDate = new Date(today.getFullYear(), 6, 31);
$("#example1").datepicker({
format: "MM yyyy",
minViewMode: 1,
autoclose: true,
startDate: startDate,
endDate: endDate
});
检查这个
使用这些 cdn 文件:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
<script>
$(document).ready(function(){
$( "#month,#month1" ).datepicker({
inline: true,
changeMonth: true,
changeYear: true,
minDate: -20,
maxDate: "+5M +1D"
});
});
</script>
$input = $(".date");
$input.datepicker({
format: "dd-mm-yyyy",
defaultViewDate: {year:2000, month:0, day:1}
});
$input.datepicker("setDate", null);
假设有一个带有 class 日期的输入元素, 现在您正在设置 defaultViewDate 年 2000 月 1 月 1 日 之后, setDate null 将取消选择日期,现在您处于一月日历,没有任何选择的日期。
试试这个
viewMode: "months" 只显示月份和 minViewMode:"months"防止走年
$('#id').datepicker({
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
})