Bootstrap的datetimepicker详细示例

匿名 (未验证) 提交于 2019-12-03 00:18:01


插件下载地址:

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中的配置:

符号意义
p12小时制且小写(‘am’ or ‘pm’)
P12小时制且大写(‘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'



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!