bootstrap datetimepicker時間日期控件

github地址：https://github.com/smalot/bootstrap-datetimepicker

 

Both Date and Time picker widget based on twitter bootstrap (supports Bootstrap v2 and v3) http://www.malot.fr/bootstrap-datetimepicker/

 

綁定輸入框，並設置format選項：

1. <input type="text" value="2012-05-15 21:05" id="datetimepicker">

1. $('#datetimepicker').datetimepicker({
2. format: 'yyyy-mm-dd hh:ii'
3. });

綁定輸入框，並設置format標記：

1. <input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

1. $('#datetimepicker').datetimepicker();

作為組件使用：

1. <div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
2. <input size="16" type="text" value="12-02-2012" readonly>
3. <span class="add-on"><i class="icon-th"></i></span>
4. </div>

1. $('#datetimepicker').datetimepicker();

作為內聯日期時間選擇器：

1. <div id="datetimepicker"></div>

1. $('#datetimepicker').datetimepicker();

 

 

設置2個日期輸入框結束時間不小於開始時間

 

$(".form_datetime").datetimepicker({

todayBtn: true,

language: 'zh-CN',
autoclose: true,
todayHighlight: true,
startView:2,

minView:2,
forceParse: true,

format:'yyyy-mm-dd'
})；

默認情況下，開始日期和結束日期之間是不存在關聯的，需要我們進行設置。

//日期時間選擇器
$("#datetimeStart").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click",

---

,function(ev){
    $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
});
$("#datetimeEnd").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click" function (ev) {
    $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
});

click時間與changeDate事件是有區別的，剛開始沒日期，選擇日期后是不是觸發changeDate時間的，click是會觸發的，我們想要一開始就限定時間，所以要用click事件。

 

 

 

setStartDate

參數:

• startDate (String)

給日期時間選擇器設置一個新的起始日期。

1. $('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

Omit startDate (or provide an otherwise falsey value) to unset the limit.

1. $('#datetimepicker').datetimepicker('setStartDate');
2. $('#datetimepicker').datetimepicker('setStartDate', null);

 

changeDate

當日期被改變時被觸發。

1. $('#date-end')
2. .datetimepicker()
3. .on('changeDate', function(ev){
4. if (ev.date.valueOf() < date-start-display.valueOf()){
5. ....
6. }
7. });

設置開始時間不小於今天日期

 

function getToday()
    {
        var d=new Date();
        var str="";
        str+=d.getFullYear()+"-";
        
        var month=d.getMonth()+1;
        if(month<10)
            month="0"+month;
        var day=d.getDate();
        if(day<10)
            day="0"+day;
        
        str+=month;
        str+="-";
        str+=day;
        return str;
        
    }
    $("#start").on('changeDate', function(ev){
         var today=getToday();
        $("#start").datetimepicker('setStartDate',today);
        
    });

 

配置選項:

$("'#datetimepicker").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",//設置時間格式，默認值: 'mm/dd/yyyy'
        weekStart : 0, //一周從哪一天開始。0（星期日）到6（星期六）,默認值0
        startDate : "2013-02-14 10:00",//可以被選擇的最早時間
        endDate : "2016-02-14 10:00",//可以被選擇的最晚時間
        daysOfWeekDisabled : "0,6",//禁止選擇一星期中的某些天，例子中這樣是禁止選擇周六和周日
        autoclose : true,//當選擇一個日期之后是否立即關閉此日期時間選擇器
        startView : 2,//點開插件后顯示的界面。0、小時1、天2、月3、年4、十年，默認值2
        minView : 0,//插件可以精確到那個時間，比如1的話就只能選擇到天，不能選擇小時了
        maxView：4,//同理
        todayBtn : true,//是否在底部顯示“今天”按鈕
        todayHighlight : true,//是否高亮當前時間
        keyboardNavigation : true,//是否允許鍵盤選擇時間
        language : 'zh-CN',//選擇語言，前提是該語言已導入
        forceParse : true,//當選擇器關閉的時候，是否強制解析輸入框中的值。也就是說，當用戶在輸入框中輸入了不正確的日期，選擇器將會盡量解析輸入的值，並將解析后的正確值按照給定的格式format設置到輸入框中
        minuteStep : 5,//分鍾的間隔
        pickerPosition : "bottom-right",//顯示的位置，還支持bottom-left
        viewSelect : 0,//默認和minView相同
        showMeridian : true,//是否加上網格
        initialDate : "2015-02-14 10:00"//初始化的時間
});

 

 

 

第二章 時間控件（DateTime Picker）