bootstrap datetimepicker 日期插件內容解釋

 

bootstrap datetimepicker 日期插件超詳細使用方法

日期時間選擇器

目前,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框日曆自己會彈出，簡潔美觀

下載地址：http://www.layui.com/laydate/