$('.form_date').datetimepicker({//初始化 language: 'zh-CN', //weekStart: 1, //todayBtn: 1, autoclose: 1, //todayHighlight: 1, //startView: 2, //minView: 2, //forceParse: 0, format: 'yyyy-mm-dd',//格式化想要显示的时间格式 minView: 'month'//日期时间选择器所能够提供的最精确的时间选择视图。 });$('.form_date').datetimepicker("update",'2015-01-22');//赋值 $('.form_date').datetimepicker('setDate',(new Date()));//赋值，当前日期 var year = $('.form_date').datetimepicker('getDate').getFullYear();//获取年 var month = $('.form_date').datetimepicker('getDate').getMonth();//获取月 var day = $('.form_date').datetimepicker('getDate').getDate();//获取日 var hours = $('.form_date').datetimepicker('getDate').getHours();//获取小时 var minute = $('.form_date').datetimepicker('getDate').getMinutes();//获取分钟 var seconde = $('.form_date').datetimepicker('getDate').getSeconds();//获取秒$('#datetimepicker').datetimepicker({ value: '' // 设置当前datetimepicker的值 rtl: false, // false 默认显示方式 true timepicker和datepicker位置变换 format: 'Y/m/d H:i', // 设置时间年月日时分的格式 如: 2016/11/15 18:00 formatTime: 'H:i', // 设置时间时分的格式 formatDate: 'Y/m/d', // 设置时间年月日的格式 startDate: false, // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05', step: 10, // 设置时间时分的间隔 closeOnDateSelect: false, // true 设置datepicker可点击 false 设置datepicker不可点击 实际上可以双击 closeOnTimeSelect: true, // true 设置timepicker可点击 false 设置timepicker不可点击 closeOnWithoutClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker closeOnInputClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker (会有闪动 先隐藏 再显示) timepicker: true, // true 显示timepicker false 隐藏timepicker datepicker: true, // true 显示datepicker false 隐藏datepicker weeks: false, // true 显示周数 false 隐藏周数 defaultTime: false, // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. '10:00' for formatTime: 'H:i') defaultDate: false, // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05') minDate: false, // 设置datepicker最小的限制日期 如：2016/08/15 maxDate: false, // 设置datepicker最大的限制日期 如：2016/11/15 minTime: false, // 设置timepicker最小的限制时间 如：08:00 maxTime: false, // 设置timepicker最大的限制时间 如：18:00 allowTimes: [], // 设置timepicker显示的时间 如：allowTimes:['09:00','11:00','12:00','21:00'] opened: false, // false默认打开datetimepicker可关闭 true打开datetimepicker后不可关闭 initTime: true, // 设置timepicker默认时间 如：08:00 inline: false, // ture设置datetimepicker一直显示 theme: '', // ture设置datetimepicker显示样式 如: 'dark' withoutCopyright: true, // ture默认隐藏左下角'xdsoft.net'链接 false 显示左下角'xdsoft.net'链接 inverseButton: false, // false 默认 true datepicker的上一月和下一月功能互换 timepicker的上下可点击按钮功能互换 hours12: false, // true设置12小时格式 false设置24小时格式 next: 'xdsoft_next', // 设置datepicker上一月按钮的样式 prev : 'xdsoft_prev', // 设置datepicker下一月按钮的样式 dayOfWeekStart: 0, // 设置默认第-列为周几 如：0 周日 1 周一 parentID: 'body', // 设置父级选择器 timeHeightInTimePicker: 25, // 设置timepicker的行高 timepickerScrollbar: true, // ture设置timepicker显示滑动条 false设置timepicker不显示滑动条 todayButton: true, // ture显示今天按钮 false不显示今天按钮 位置在datepicker左上角 prevButton: true, // ture显示上一月按钮 false不显示上一月按钮 位置在datepicker左上角 nextButton: true, // ture显示下一月按钮 false不显示下一月按钮 位置在datepicker又上角 scrollMonth: true, // ture 设置datepicker的月份可以滑动 false设置datepicker的月份不可以滑动 lazyInit: false, // 翻译： 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作 mask: false, // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具，从0到9的数字，设置为值的最高可能的数字。例如：第一个小时的数字不能大于2，而第一位数字不能大于5 如：{mask:'9999/19/39 29:59',format:'Y/m/d H:i'} validateOnBlur: true, // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值 yearStart: 1950, // 设置最小的年份 yearEnd: 2050, // 设置最大的年份 monthStart: 0, // 设置最小的月份 monthEnd: 11, // 设置最大的月份 roundTime: 'round', // 设置timepicker的计算方式 round四舍五入 ceil向上取整 floor向下取整 allowDateRe : null, // 设置正则表达式检查日期 如：{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' } disabledDates : [], // 设置不可点击的日期 如：disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016'] disabledWeekDays: [], // 设置不可点击的星期 如：disabledWeekDays:[0,3,4] yearOffset: 0, // 设置偏移年份 如：2 代表当前年份加2 -2 代表当前年份减2 beforeShowDay: null, // 显示datetimepicker之前可调用的方法 {beforeShowDay:function(d) {console.log("bsd"); } } enterLikeTab: true, // tab按键均可使datetimepicker关闭 true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭 showApplyButton: false // 相当于确定按钮 true显示 false隐藏 }); /* * 监听时间插件显示时的事件 */ $('#datetimepicker').datetimepicker({ onShow: function(dateText, inst) { console.log("---已打开datetimepicker----"); } }); /* * 监听时间插件关闭时的事件 */ $('#datetimepicker').datetimepicker({ onClose: function(dateText, inst) { console.log("---已关闭datetimepicker----"); } }); /* * 监听点击日期时的事件 */ $('#datetimepicker').datetimepicker({ onSelectDate: function(dateText, inst) { console.log(dateText); } }); /* * 监听点击时分的事件 */ $('#datetimepicker').datetimepicker({ onSelectTime: function(dateText, inst) { console.log(dateText); } }); /* * 监听点击datepicker 上一月下一月按钮及选择月份点击事件 */ $('#datetimepicker').datetimepicker({ onChangeMonth: function(dateText, inst) { console.log(dateText); } }); /* * 监听获取当前datetimepicker显示的所有日期信息 */ $('#datetimepicker').datetimepicker({ onGetWeekOfYear: function(dateText, inst) { console.log(dateText); } }); /* * 监听选择年份的点击事件 */ $('#datetimepicker').datetimepicker({ onChangeYear: function(dateText, inst) { console.log(dateText); } }); /* * 实时监听你选择的日期和时间 */ $('#datetimepicker').datetimepicker({ onChangeDateTime: function(dateText, inst) { console.log(dateText); } }); /* * 实时监听datetimepicker上的所有事件 */ $('#datetimepicker').datetimepicker({ onGenerate: function(dateText, inst) { console.log(dateText); } }); //选择年月日的 startView: 2, minView: 2, format: 'yyyymmdd', $('#datetimepicker').datetimepicker({ format: 'yyyymmdd', weekStart: 1, autoclose: true, startView: 2, minView: 2, forceParse: false, language: 'zh-CN' });//选择年月的 startView: 3, minView: 3, format: 'yyyymm', $('#datetimepicker').datetimepicker({ format: 'yyyymm', weekStart: 1, autoclose: true, startView: 3, minView: 3, forceParse: false, language: 'zh-CN' });//选择年的 startView: 4, minView: 4, format: 'yyyy', $('#datetimepicker').datetimepicker({ format: 'yyyymm', weekStart: 1, autoclose: true, startView: 4, minView: 4, forceParse: false, language: 'zh-CN' }); <div class="col-md-7"> <div class='input-group date form_date' > <input name="startTm" id="datetimepicker" type='text' class="form-control input-sm" readonly="readonly"/> <span class="input-group-addon input-sm"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class='input-group date form_date' data-date-format="yyyymmdd"> <input name="startTm" id="startTm" type='text' class="form-control input-sm" readonly="readonly" /> <span class="input-group-addon input-sm"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <div class="date input-append" id="datetimepicker"> <div class="input-group"> <input class="form-control input-sm" readonly="readonly" type="text"> <span class="add-on input-group-addon"><i class="icon-remove"></i></span> <span class="add-on input-group-addon"><i class="icon-th"></i></span> </div> </div>文章来源: Datetimepicker.js用法