几种bootstrap时间控件总结记录
githup地址:https://github.com/suidagang/bootsrapdatetimepicker
示例
包部分
html部分
年月日
//选择年月日的
$('#datetimepicker_day').datetimepicker({
format: 'yyyymmdd',
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
forceParse: false,
language: 'zh-CN'
});
年月
//选择年月
$('#datetimepicker_month').datetimepicker({
language: 'zh-CN',
format: 'yyyymm',
weekStart: 1,
autoclose: true,
startView: 3,
minView: 3,
forceParse: false
});
年
//选择年
$('#datetimepicker_year').datetimepicker({
format: 'yyyymm',
weekStart: 1,
autoclose: true,
startView: 4,
minView: 4,
forceParse: false,
language: 'zh-CN'
});
年月日时分
$("#datetimepicker_year_time").datetimepicker({
language: 'zh-CN',
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: false,//清除按钮
todayBtn: true,//今日按钮
format: 'yyyy-mm-dd hh:ii:ss',
startView: 'month',// 进来是月
minView: 0,// 可以看到小时
maxView: 1,
minuteStep: 5, //分钟间隔为1分
todayHighlight: false,
forceParse: true,
endDate: new Date()
}).on('changeDate', function (ev) {
if (ev.date) {
$("#eDatePicker").datetimepicker('setStartDate', new Date(ev.date.valueOf()))
} else {
$("#eDatePicker").datetimepicker('setStartDate', null);
}
});
年月日时间范围
$('input[name="daterange"]').daterangepicker();
年月日时分时间范围
//年月日时分时间范围
$('#rangeTime').daterangepicker({
timePicker: true,
timePickerIncrement: 1,
format: 'MM/DD/YYYY h:mm:ss A'
}, function (start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});