Bootstrap日期和时间表单组件使用方法

下載組件：Bootstrap日期和时间表单组件

提取其中的主要文件js/bootstrap-datetimepicker.js和css/bootstrap-datetimepicker.min.css

1.引入bootstrap.min.css，因為其樣式包含在此文件中

<link rel="stylesheet" href="bootstrap.min.css">

2.引入jquery.js，因為bootstrap是依賴於jquery的

<script src="jquery.js"></script>

3.引入bootstrap.min.js

<script src="bootstrap.min.js"></script>

以上是必備內容

4.引入日期組件的css，bootstrap-datetimepicker.min.css

<link rel="stylesheet" href="bootstrap-datetimepicker.min.css">

5.引入日期組件的js，bootstrap-datetimepicker.js

<script src="bootstrap-datetimepicker.js"></script>

6.配置

（1）創建HTML代碼

<input class="form-control form_datetime" type="text" name="end" value="">

（2）配置script代碼

$.fn.datetimepicker.dates['zh'] = {  
                days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],  
                daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],  
                daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],  
                months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],  
                monthsShort:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
                meridiem:    ["上午", "下午"],  
                today:       "今天"  
        };  //設置中文樣式

//初始化日期組件
    $(".form_datetime").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    autoclose:true,
    language:'zh',
    });

 

转载于:https://my.oschina.net/u/3514164/blog/967496