引入css和js
<link rel="stylesheet" href="/${appName}/commons/css/datapicker/datepicker3.css" type="text/css"></link>
<script type="text/javascript" src="/${appName}/commons/js/datapicker/bootstrap-datepicker.js"></script>
Html及Js
<span style="position: relative; z-index: 9999;"> <!--當在model彈框中需要加此span-->
<input type="text" value="" class="form-control" name="time" id="time_add" tabindex="4" />
</span>
/*顯示改為中文*/
$.fn.datepicker.dates['cn'] = { //切換為中文顯示
days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
clear: "清除"
};
/*初始化時間控件*/
$('#time_add').datepicker({
autoclose: true, //自動關閉
beforeShowDay: $.noop, //在顯示日期之前調用的函數
calendarWeeks: false, //是否顯示今年是第幾周
clearBtn: false, //顯示清除按鈕
daysOfWeekDisabled: [], //星期幾不可選
endDate: Infinity, //日歷結束日期
forceParse: true, //是否強制轉換不符合格式的字符串
format: 'yyyy-mm-dd', //日期格式
keyboardNavigation: true, //是否顯示箭頭導航
language: 'cn', //語言
orientation: "auto", //方向
rtl: false,
startDate: -Infinity, //日歷開始日期
startView: 0, //開始顯示
todayBtn: false, //今天按鈕
todayHighlight: false, //今天高亮
weekStart: 0 //星期幾是開始
startView: 'months', //開始視圖 視圖類 1代表years 2代表months 默認值0代表day
maxViewMode:'years', //最大視圖
minViewMode:'months', //最小視圖
});
視圖部分源碼

