插件下载地址:
https://download.csdn.net/download/lianzhang861/10432421
首先引入css和js
html:只需要写一个普通的input
<div class="row" style="margin-top: 10px"> <label class="col-sm-3 control-label" style="text-align: right; margin-top:5px;padding-left: 10px;padding-right: 10px">活动开始时间:</label> <div class="col-sm-9"> <input type="text" name="starttime" <%--readonly--%> class="form-control" id="starttime"> </div> </div>
js:注释中已经写得很清楚了
<script> $.fn.datetimepicker.dates['zh'] = { days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"], daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"], daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"], months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], meridiem: ["上午", "下午"], //suffix: ["st", "nd", "rd", "th"], today: "今天" }; $("#starttime,#endtime").datetimepicker({ language: 'zh', //用自己设置的时间文字 //weekStart: 1, //一周从那天开始,默认为0,从周日开始,可以设为1从周一开始 // startDate:"2018-5-20", //开始时间,可以写字符串,也可以直接写日期格式new Date(),在这之前的日期不能选择 //endDate:"2018-6-20", //daysOfWeekDisabled: [0,4,6], //一周的周几不能选 todayBtn: 1, //是否显示今天按钮,0为不显示 autoclose: 1, //选完时间后是否自动关闭 todayHighlight: 1, //高亮显示当天日期 startView: 2, //0从小时视图开始,选分;1 从天视图开始,选小时;2从月视图开始,选天;3从年视图开始,选月;4从十年视图开始,选年 minView: 0,//最精确时间,默认0;0从小时视图开始,选分;1从天视图开始,选小时;2从月视图开始,选天;3从年视图开始,选月;4从十年视图开始,选年 //maxView:4, //默认值:4, ‘decade’ //keyboardNavigation:true, //是否可以用键盘方向键选日期,默认true forceParse: 0, //强制解析,你输入的可能不正规,但是它胡强制尽量解析成你规定的格式(format) format: 'yyyy-mm-dd hh:ii:ss',// 格式,注意ii才是分,mm或MM都是月 minuteStep:5, //选择分钟时的跨度,默认为5分钟 //pickerPosition:"top-right", // ‘bottom-left’,’top-right’,’top-left’’bottom-right’ showMeridian:0, //在日期和小时选择界面,出现上下午的选项,默认false // showSecond: false, // showMillisec: true, //timeFormat: 'hh:mm:ss:l', //bootcssVer: 3, }); </script>
format中的配置:
符号 | 意义 |
---|---|
p | 12小时制且小写(‘am’ or ‘pm’) |
P | 12小时制且大写(‘AM’ or ‘PM’) |
s | 秒,前面不补0 |
ss | 秒,前面补0 |
i | 分,前面不补0 |
ii | 分,前面补0 |
h | 时,24小时制,前面不补0 |
hh | 时,24小时制,前面补0 |
H | 时,12小时制,前面不补0 |
HH | 时,12小时制,前面补0 |
d | 日,前面不补0 |
dd | 日,前面补0 |
m | 月,数字表示,前面不补0 如:4 |
mm | 月,数字表示,前面补0 如:04 |
M | 月,缩写表示,前面补0 如:Apr |
MM | 月,全称表示,前面补0 如:April |
yy | 年,后两位 如:16 |
yyyy | 年,全部 如:2016 |
注意这个是修改版的,可以选择秒,原版是没有的,只有配置了秒才会显示
format: 'yyyy-mm-dd hh:ii:ss'