bootstrap日期控件datetimepicker

发表于

bootstrap日期控件datetimepicker

常用地址

bootstrap静态cdn地址: http://www.bootcdn.cn/
bootstrap中文网: http://www.bootcss.com/
datetimepicker中文: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

日期控件的使用

引入资源样式
1
2
3
4
5
6
7
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="public/bootstrap/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 这里为本地资源,可以从datetimepicker官网下载 -->
<script src="public/bootstrap/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
引入html模板
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-group">
    <label for="eventTime" class="col-sm-2 control-label">时间</label>
    <div class="col-sm-10">
        <label>选择日期+时间：</label>
        <!--指定 date标记-->
        <div class='input-group date' id='datetimepicker'>
            <input type='text' id="eventTime" name="eventTime" class="form-control"/>
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
        </div>
    </div>
</div>

使用控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$.fn.datetimepicker.dates['en'] = {
    en: {
        days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
        months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        meridiem: ["am", "pm"],
        suffix: ["st", "nd", "rd", "th"],
        today: "Today"
    }
};

$.fn.datetimepicker.dates['zh'] = {
    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
    daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
    daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
    meridiem: ["上午", "下午"],
    //suffix:      ["st", "nd", "rd", "th"],
    today: "今天"
};

<!-- 中文,英文可以通过language选择 -->
$('#datetimepicker').datetimepicker({
    language: 'zh',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1
}).on('changeDate', function (ev) {
    $(this).datetimepicker('hide');
});

以上.