【Bootstrap】bootstrap-datetimepicker日期时间插件

【bootstrap-datetimepicker】

　　datetimepicker是一个比较方便的日期时间插件。有了这个之后，我们可以在类似于表单的地方提供一个友好的日期（时间）输入功能。官方文档：【http://www.bootcss.com/p/bootstrap-datetimepicker/】

　　要使用datetimepicker组件，首先引入一些文件：

<link href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">

<script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>

　　同样这里没有写出来bootstrap的css和js以及jquery，但都是也要包含的。

　　■　　典型应用：

　　HTML写成这样：

<div class="input-group date">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

　　然后在js中这样写：

var today = new Date();
var format_td = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
$('.input-group.date').datetimepicker({
    format: 'yyyy-mm-dd hh:00',
    language: 'zh-CN',
    todayBtn: 'linked',
    maxView: 3,
    minView: 1,
    autoClose: true,
    minuteStep: 30,
    startDate: format_td,
    pickerPosition: 'bottom-right'
});

　　我们就可以在页面上得到一个输入框（type还是text的，不是date或者datetime），然后这个输入框右边会带有一个日历图标（input-group-addon），然后点击输入框或日历时会跳出一个日历来供用户选择具体的日期时间。选择完成后输入框中会出现特定格式的时间字符串，供表单提取数据或其他用。

　　下面来解释一下在这个初始化过程中，各个参数的含义：

　　format　　指出了最后在输入框中的字符串的样式，上面这个yyyy-mm-dd hh都是格式化字符串，对应于类似"2017-01-01 08"（2017年1月1日上午8时）这样子。而:00是我固定写死的。更多的还有hh:ii:ss表示精确到秒的时间格式等，至于两位年份，一位小时数等等可以去官方文档看格式化字符串的写法。

　　language　　国际化显示适应，需要引入bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js才可顺利显示中文。

　　todayBtn　　可以设置为true,false或者'linked'。让日历组件下方有一个“今天”按钮。说是“今天”，其实应该是“现在”，如果是true则点击后跳转到当前日期；如果是'linked'则点击时自动选中当前时间日期并且写入输入框

　　maxView,minView　　日历组件可以根据需要分成好多不同的维度来看，这两个参数用来控制用户能够到达的最宏观和最微观的维度。值的各个数字的含义是：0-小时；1-天；2-月；3-年；4-十年。其默认值分别是0和4。另外还有startView参数用来指出点击调用日历控件时默认显示的维度。默认值是2

　　autoClose　　当选择一个日期后关闭此日历控件

　　minuteStep　　控制分钟选择的粒度。在时间下面，我们还可以选择具体到多少分钟。比如点击14:00，这个值是30的话，我们能够点击14:00和14:30

　　startDate,endDate　　分别指出该日历能够选择的最早和最晚日期。从上面的代码中也可以看出来其取值是个yyyy-mm-dd格式的字符串。实际上也可以是个Date对象，也就是说这里写new Date()也完全可以。另外提一下，Date对象getMonth的值是从0开始到11的，getFullYear才是获取4位数年份的方法。

　　pickerPosition　　指出日历控件出现相对于输入框的位置，默认值就是bottom-right,也可以top-left之类的

　　daysOfWeekDisabled　　一个数组，指出一个星期的星期X不能被选择。需要注意的是这里day是西方那一套，也就是如果值是[0,6]就可以把周末都disabled掉，而非[6,7]。

　　初始化参数就说这么多吧，更多的可以参考文档

　　■　　编程控制和方法

　　datetimepicker方法不仅可以用于初始化控件，还可以在初始化完成之后，传入不同的参数来实现不同的编程控制。比如：

$('#testdp').datetimepicker('show')  //显示日历
$('#testdp').datetimepicker('hide')  //隐藏日历
$('#testdp').datetimepicker('update')  //将输入框中的日期字符串解析并反映到日历汇总

$('#testdp').datetimepicker('setStartDate','2017-01-01')  //或者null，用来设置日历最早可选日期
/*类似的很多参数也可以这么设置
比如
setEndDate
setDaysOfWeekDisabled
...
*/

　　■　　事件

　　datetimepicker留出了一些事件的接口供我们调用比如

　　show ， hide ， changeDate，changeYear，changeMonth这些都一目了然

　　outOfRange　　当用户试图在日历上选择超出了我们设置的范围（由startDate,endDate,daysOfWeekDisabled等决定）的日期时触发的事件

　　嗯 datetimepicker基本上就是这样了，没有什么很复杂的地方