引入

在引入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();
});