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） 

bootstrap datetimepicker時間日期控制項