正文

日历插件：Bootstrap的datetimepicker插件

IP云
IP云V管理员/18 阅读
08/07
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

注意：可以选择性引入 bootstrap.min.css和bootstrap.min.js，引入样式更好控制

option选项

0-hour 1-day 2-month 3-year 4-all year //常用
format: 'yyyy-mm-dd hh:ii:ss', //日期格式年-月-日 时:分:秒 默认是：mm/dd/yyyy
autoclose: true,//默认值：false，当选择一个日期之后是否立即关闭此日期时间选择器
startDate: new Date(), //设置默认开始时间，new Date()表示默认是当前时间，当前之前的时间都不可选
todayBtn: true, //默认值: false，是否显示“今天”按钮，可选值true,'linked',如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
todayHighlight: true,//默认值: false，如果为true, 高亮当前日期
language: 'zh-CN', //语言设置默认是英文'en' 中文：'zh-CN'，如果是设置中文的话，需要特殊设置 startView: 3,// 日期时间选择器打开之后首先显示的视图 默认是2（month视图）
//hour视图：0或hour day视图：1或day month视图：2或month year视图：3或year 4(decade)：每年的视图
minView: 2, //默认值：0, 'hour' 日期时间选择器所能够提供的最精确的时间选择视图 //不常用，使用默认即可
weekStart: , //一周从哪一天开始。0（默认是星期日）到6（星期六）
endDate: new Date(), //设置默认结束时间，new Date()表示默认是当前时间，当前之后的时间都不可选
daysOfWeekDisabled: [, ],//每周不可用时间，0-6表示周日到周六
maxView: ,// 默认值：4, 'decade' 日期时间选择器最高能展示的选择范围视图
keyboardNavigation: true,// 默认值: true，是否允许通过方向键改变日期
forceParse: true,//默认值: true,当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
minuteStep: ,//默认值: 5，此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。
viewSelect: 'same as minView', // 默认值: same as minView (可选值 'decade', 'year', 'month', 'day', 'hour')
showMeridian: false,//是否显示子午线,默认是false，不显示
initialDate: new Date(),//默认值: new Date()

设置中文语言显示，只需向 $.fn.datetimepicker.dates中增加一个key即可，但是一定要放在调用 .datetimepicker()之前。如下案例

$.fn.datetimepicker.dates['zh'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
meridiem: ["上午", "下午"],
today: "今天"
};

常用的方法

datetimepicker：/初始化日期时间选择器
$('#datetimepicker').datetimepicker(options)remove:移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。
$('#datetimepicker').datetimepicker('remove');show:显示日期时间选择器（无参数）
$('#datetimepicker').datetimepicker('show');hide:隐藏日期时间选择器（无参数）
$('#datetimepicker').datetimepicker('hide');update：使用当前输入框中的值更新日期时间选择器（无参数）
$('#datetimepicker').datetimepicker('update');setStartDate：给日期时间选择器设置一个新的起始日期，参数string
$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');setEndDate：给日期时间选择器设置一个新的结束日期，参数string
$('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');setDaysOfWeekDisabled：设置一周中不可以用的天，参数array
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);

事件

Datetimepicker 类暴露了一组event用以对日期进行操作。
show：当选择器显示时被触发。
hide：当选择器隐藏时被触发。
changeDate：当日期被改变时被触发

$('#datetimepicker').datetimepicker()
.on('changeDate', function(ev){
......
});

changeYear：当十年视图上的年视图view被改变时触发。
changeMonth：当年视图上的月视图view被改变时触发。
outOfRange：当用户选择的日期超出startDate 或endDate 时，或者通过setDate 或 setUTCDate方法设置日期超出范围时被触发。
 

键盘支持：日期时间选择器提供了键盘导航：up, down, left, right 方向键

这些方向键中，left/right 向后/向前 一天，up/down 向后/向前 一周。
配合shift键，up/left 向后退一个月，down/right 向前进一个月。
配置ctrl键，up/left 向后退一年，down/right 向前进一年。
Shift+ctrl 和 ctrl 同等效果 - 也就是说，他们不能同时改变月和年，只能单独改变年。
escape: 键可以用来隐藏、重新显示日期时间选择器；当用户希望手工编辑输入框中的值是会很有用。
enter:当选择器处于显示状态时，enter键只是将其隐藏。当选择器处于隐藏状态时，enter键发挥通常的功能 - 提交当前表单，或者其他。

===================================================================

视图demo：年-月-日 时:分:秒

<link rel="stylesheet" href="./js//bootstrap.datetimepicker/bootstrap-datetimepicker.min.css" />
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js//bootstrap.datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$('.view').datetimepicker({
autoclose: true,
startDate: new Date(),
todayBtn: true,
todayHighlight: true,
language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss',
startView: ,// 默认是2（month视图） //hour视图：0或hour day视图：1或day month视图：2或month year视图：3或year 4(decade)：每年的视图
minView: , //默认值：0, 'hour' 日期时间选择器所能够提供的最精确的时间选择视图
});
})
//只需向 $.fn.datetimepicker.dates中增加一个key即可，一定要放在调用 .datetimepicker()之前。如下案例
$.fn.datetimepicker.dates['zh'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
meridiem: ["上午", "下午"],
today: "今天"
};
</script>

===================================================================

视图demo：年-月-日 时:分

<link rel="stylesheet" href="./js//bootstrap.datetimepicker/bootstrap-datetimepicker.min.css" />
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js//bootstrap.datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$('.view').datetimepicker({
autoclose: true,
startDate: new Date(),
todayBtn: true,
todayHighlight: true,
language: 'zh-CN', format: 'yyyy-mm-dd hh:ii',
startView: ,// 默认是2（month视图） //hour视图：0或hour day视图：1或day month视图：2或month year视图：3或year 4(decade)：每年的视图
minView: , //默认值：0, 'hour' 日期时间选择器所能够提供的最精确的时间选择视图
});
})
//只需向 $.fn.datetimepicker.dates中增加一个key即可，一定要放在调用 .datetimepicker()之前。如下案例
$.fn.datetimepicker.dates['zh'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
meridiem: ["上午", "下午"],
today: "今天"
};
</script>

===================================================================

视图demo：年-月-日

<link rel="stylesheet" href="./js//bootstrap.datetimepicker/bootstrap-datetimepicker.min.css" />
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js//bootstrap.datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$('.view').datetimepicker({
autoclose: true,
startDate: new Date(),
todayBtn: true,
todayHighlight: true,
language: 'zh-CN', format: 'yyyy-mm-dd',
startView: ,// 默认是2（month视图） //hour视图：0或hour day视图：1或day month视图：2或month year视图：3或year 4(decade)：每年的视图
minView: , //默认值：0, 'hour' 日期时间选择器所能够提供的最精确的时间选择视图
});
})
//只需向 $.fn.datetimepicker.dates中增加一个key即可，一定要放在调用 .datetimepicker()之前。如下案例
$.fn.datetimepicker.dates['zh'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
meridiem: ["上午", "下午"],
today: "今天"
};
</script>

===================================================================

具体参考：https://github.com/summerSongXia/summerProject/tree/master/datetimepicter