日期時間選擇器

目前,bootstrap有兩種日曆。datepicker和datetimepicker,後者是前者的拓展。

Bootstrap日期和時間元件：

使用示例：

從左到右依次是十年檢視、年檢視、月檢視、日檢視、小時檢視

使用時需要匯入相應的CSS和js檔案：

可選的日期格式：

• yyyy-mm-dd
• yyyy-mm-dd hh:ii
• yyyy-mm-dd hh:ii:ss

HTML部分程式碼：

<div class="form-group">
                <label for="dtp_input1" class
 
="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text"
 
 value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div
 
>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>

JS部分程式碼：

$('.form_datetime').datetimepicker({
        weekStart: 0, //一週從哪一天開始
        todayBtn:  1, //
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });

選項：

weekStart

Integer. 預設值：0

一週從哪一天開始。0（星期日）到6（星期六）

startDate

Date. 預設值：開始時間

endDate

Date. 預設值：結束時間

autoclose

Boolean. 預設值：false

當選擇一個日期之後是否立即關閉此日期時間選擇器。

startView

Number, String. 預設值：2, 'month'

日期時間選擇器開啟之後首先顯示的檢視。 可接受的值：

• 0 or 'hour' 為小時檢視
• 1 or 'day' 為天檢視
• 2 or 'month' 為月檢視（為預設值）
• 3 or 'year'  為年檢視
• 4 or 'decade' 為十年檢視

todayBtn

Boolean, "linked". 預設值: false

如果此值為true 或 "linked"，則在日期時間選擇器元件的底部顯示一個 "Today" 按鈕用以選擇當前日期。如果是true的話，"Today" 按鈕僅僅將檢視轉到當天的日期，如果是"linked"，當天日期將會被選中。

todayHighlight

Boolean. 預設值: false

如果為true, 高亮當前日期。

keyboardNavigation

Boolean. 預設值: true

是否允許通過方向鍵改變日期。

日期時間選擇器提供了鍵盤導航：

up, down, left, right 方向鍵

這些方向鍵中，left/right 向後/向前 一天，up/down 向後/向前 一週。

配合shift鍵，up/left 向後退一個月，down/right 向前進一個月。

配置ctrl鍵，up/left 向後退一年，down/right 向前進一年。

Shift+ctrl 和 ctrl 同等效果 - 也就是說，他們不能同時改變月和年，只能單獨改變年。

language

String. 預設值: 'en'； 可以通過匯入對應語言的js檔案來設定語言

forceParse

Boolean. 預設值: true

當選擇器關閉的時候，是否強制解析輸入框中的值。

 方法：

.datetimepicker(options)

初始化日期時間選擇器。

remove

引數: None

移除日期時間選擇器。同時移除已經繫結的event、內部繫結的物件和HTML元素。

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

show

引數: None

顯示日期時間選擇器。

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

hide

引數: None

隱藏日期時間選擇器。

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

update

引數: None

使用當前輸入框中的值更新日期時間選擇器。

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

setStartDate

引數:

• startDate (String)

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

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

setEndDate

引數:

• endDate (String)

給日期時間選擇器設定結束日期。

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

________________________________________________________________

附另一種簡單好用的日曆外掛

關於日曆外掛使用說明

本外掛僅需要引入一個js檔案，外加部分css樣式（也可以不引入），以及input標籤

一、解壓後框架如圖所示

二、開啟test.html檔案部署到專案中去，將laydate整個資料夾都放入專案，（一定要把laydate放入整個專案中，不用單獨只放js檔案，不然不會有效果，裡面的檔案也不需要刪除）如圖為頁面需要引入的檔案

三、介面如下，點選input框日曆自己會彈出，簡潔美觀