利用bootstrap-datetimepicker實日曆插件

因爲項目中須要獲取一個時間值，手動輸入的話比較Low，這裏引用了bootstrap-datetimepicker模塊來實現。

 

一、首先，下載該模塊並引用。(官網:http://www.bootcss.com/p/bootstrap-datetimepicker)

git clone git://github.com/smalot/bootstrap-datetimepicker.git

 在資源頁面中添加引用:

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

<script src="/static/alpha/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/alpha/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/static/alpha/dist/js/server_handle.js"></script>  #本身定義的js，要寫在以上資源之下，不然會提示js中定義的function找不到。

 

二、項目頁面中定義時間輸入框及js樣式:

<input name="expirdate" class="serverExpirDate" type="text" placeholder="請選擇日期">

文件: server_handle.js

$(".serverExpirDate").datetimepicker({
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    statView: 2,
    todayHighlight: 1,
    minView: 2,
    clearBtn: true,
    forceParse: true,
    showMeridian : true
});

注:

關於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、小時一、天二、月三、年四、十年，默認值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,//是否加上網格，true的話顯示上下午
    initialDate : "2015-02-14 10:00"//初始化的時間