引入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', //最小视图
});
视图部分源码