Bootstrap的datetimepicker详细示例

229 阅读1分钟

插件下载地址:

download.csdn.net/download/li…

首先引入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'