bootstrap日历插件使用总结(datetimepicker)

简述

很多时候我们会遇到一些旧有的项目。一般此类项目会使用到JQ。在迭代此类项目的时候，考虑不做大改动的情况下使用原有框架相性较高的插件会比较合适。

datetimepicker是一个bootstrap的日历插件，可以符合一般性的需求。依赖于jq和bootstrap，在这篇博文里记录一下使用方法和api留待以后查阅。

官方文档地址：http://www.bootcss.com/p/bootstrap-datetimepicker/

本文使用到的源码来自于上述链接的下载地址

 

使用很简单，下面是一个简单的例子。

js部分

let option = {
    format: "yyyy-mm-dd",
    autoclose: true,
    todayBtn: true,
    minView: 2,
    language:'zh-CN',
    weekStart:1
}
let picker = $('#datetimepicker').datetimepicker(option)

这是依据我的需求来创建的一个简单的例子。

配置属性上

format    已年月日格式显示

autoclose 选择完成后自动关闭弹窗

todayBtn 今日按钮

minView  最小选择时间单位为天

language 中文 没什么好解释的

开启中文需要额外引入bootstrap-datetimepicker.zh-CN.js文件   记住一定要在引入的时候写上编码格式charset="utf-8"

weekStart 1 日历排版从周一开始

这一个简单的日历需求就做好了。

 

同时我们时常需要一个联动的日历选择器，这在很多ui框架里面都有成熟的api和组件。在这个插件里也可以轻松的做到这一点。

 

let picker1 = $('#datetimepicker-start').datetimepicker(option)
let picker2 = $('#datetimepicker-end').datetimepicker(option)
// 开始时间
picker1.on('changeDate', function(ev){
    // 打印获得的时间
    console.log(ev)
    // 封禁时间
    picker2.datetimepicker('setStartDate', ev.date)
})
// 结束时间
picker2.on('changeDate', function(ev){
    // 打印获得的时间
    console.log(ev.date)
    // 封禁时间
    picker1.datetimepicker('setEndDate', ev.date)
})

依据官方的api那么一个简单的联动日历做好了。

选择时间的时候会自动的去封禁可点击的日期，来实现联动的需求。

 

日历选择器是个非常常见的需求，也有很多插件。熟悉其基本实现原理是能定制日历更多功能的必要之路。比如每日签到，日程安排计划，定时计划标注等等。这部分有时间日后再补充。

 

 

下面放一些常用的API  详细的API可以在官方文档进行查询

autoclose

Boolean. 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值：

• 0 or 'hour' for the hour view
• 1 or 'day' for the day view
• 2 or 'month' for month view (the default)
• 3 or 'year' for the 12-month overview
• 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值：0, 'hour'

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值：4, 'decade'

日期时间选择器最高能展示的选择范围视图。

todayBtn

Boolean, "linked". 默认值: false

如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

keyboardNavigation

Boolean. 默认值: true

是否允许通过方向键改变日期。

language

String. 默认值: 'en'

The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below). If an unknown language code is given, English will be used.

forceParse

Boolean. 默认值: true

当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。