【JS】bootstrap datepicker 实用指南

引入

在引入bootstrap和jquery库后，引入datepicker库

<link rel='stylesheet' href='bootstrap-datepicker.min.css' />

<script type='text/javascript' src='bootstrap-datepicker.min.js'></script>
<script type='text/javascript' src='bootstrap-datepicker.zh-CN.min.js'></script>

添加

使用官方SandBox动态生成你所需要的样式，只需点击鼠标，即可生成HTML代码和JS初始化代码。
如果要添加大量相似的datepicker，建议设置全局默认值：

$.fn.datepicker.defaults.language = 'zh-CN';

使用$.fn.datepicker.defaults.属性名来设定默认值。
之后再调用初始化代码即可:

$('#myDatepicker').datepicker();

使用

datepicker常用操作代码如下：

读值：

//返回JavaScript标准Date(日期)对象
var date = $('#myDatepicker').datepicker('getUTCDate');

//调用formatDate方法将Date对象格式化为string
//返回字符串
var dateStr = $.fn.datepicker.DPGlobal.formatDate(date, 'yyyy-mm-dd', 'en');

取值：

//设定时间
var format = $.fn.datepicker.DPGlobal.parseFormat('yyyy-mm-dd');//需先解析formatStr为内部类型
var date = $.fn.datepicker.DPGlobal.parseDate('2015-01-01', format, 'en');//再将dateStr解析为Date对象
$('#myDatepicker').datepicker('setUTCDate', date);//最后使用setUTCDate方法置入

清空：

//清空已选择的时间
$('#myDatepicker').datepicker('clearDates');

如果不使用xxxUTCDate方法而使用xxxDate方法，获取到的Date对象会有8小时时间差，简便处理建议统一使用xxxUTCDate方法。

遇到的问题

如果在bootstrap 模态框modal上使用，datepicker面板隐藏时会触发 hide.bs.modal 事件，可用如下代码阻止冒泡：

//阻止datepicker隐藏事件冒泡到modal上
$('#myDatepicker').datepicker().on('hide', function(event) {
	event.stopPropagation();
});