bootstrap-datepicker限定可選時間範圍

此項目是  bootstrap-datetimepicker 項目 的一個分支，原項目不支持  Time 選擇。 
其它部分也進行了改進、加強，例如 load 過程增長了對 ISO-8601 日期格式的支持。 
文檔是拷貝/粘貼字原項目的文檔，而且加入了更多細節說明。 
 

別猶豫了，下載下來試試吧 !

下載 ZIP 包

此地址能夠克隆或fork本項目

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

但願這個小小的項目能幫到你 !

Tags: twitter-bootstrap, datetime, picker, component, javascript, widget

截圖

十年視圖

年視圖

月視圖

日視圖*

小時視圖 *

Day view w/ meridian *

Hour view w/ meridian *

(*)  Added views to select the time part.

依賴

須要bootstrap的下拉菜單組件 (dropdowns.less) 的某些樣式，還有bootstrap的sprites (sprites.less and associated images) 中的箭頭圖標。

A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by runningbuild/build_standalone.less through the lessc compiler:

1. $ lessc build/build_standalone.less datetimepicker.css

選項

全部須要"Date" 的選項均可以處理Date 對象; a String formatted according to the given format; or a timedelta relative to today, eg '-1d', '+6m +1y', etc, where valid units are 'd' (day), 'w' (week), 'm' (month), and 'y' (year).

你也能夠指定一個符合 ISO-8601 格式的日期時間，就能夠忽略下面的格式：

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

 

format

String. 默認值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意組合。

• p : meridian in lower case ('am' or 'pm') - according to locale file
• P : meridian in upper case ('AM' or 'PM') - according to locale file
• s : seconds without leading zeros
• ss : seconds, 2 digits with leading zeros
• i : minutes without leading zeros
• ii : minutes, 2 digits with leading zeros
• h : hour without leading zeros - 24-hour format
• hh : hour, 2 digits with leading zeros - 24-hour format
• H : hour without leading zeros - 12-hour format
• HH : hour, 2 digits with leading zeros - 12-hour format
• d : day of the month without leading zeros
• dd : day of the month, 2 digits with leading zeros
• m : numeric representation of month without leading zeros
• mm : numeric representation of the month, 2 digits with leading zeros
• M : short textual representation of a month, three letters
• MM : full textual representation of a month, such as January or March
• yy : two digit representation of a year
• yyyy : full numeric representation of a year, 4 digits

 

weekStart

Integer. 默認值：0

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

startDate

Date. 默認值：開始時間

The earliest date that may be selected; all earlier dates will be disabled.

endDate

Date. 默認值：結束時間

The latest date that may be selected; all later dates will be disabled.

daysOfWeekDisabled

String, Array. 默認值: '', []

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '0,6' or [0,6].

autoclose

Boolean. 默認值：false

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

startView

Number, String. 默認值：2, 'month'

日期時間選擇器打開以後首先顯示的視圖。 可接受的值：

• 0 or 'hour' for the hour view
• 1 or 'day' for the day view
• 2 or 'month' for month view (the default)
• 3 or 'year' for the 12-month overview
• 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默認值：0, 'hour'

日期時間選擇器所可以提供的最精確的時間選擇視圖。

maxView

Number, String. 默認值：4, 'decade'

日期時間選擇器最高能展現的選擇範圍視圖。

todayBtn

Boolean, "linked". 默認值: false

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

todayHighlight

Boolean. 默認值: false

若是爲true, 高亮當前日期。

keyboardNavigation

Boolean. 默認值: true

是否容許經過方向鍵改變日期。

language

String. 默認值: 'en'

The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below). If an unknown language code is given, English will be used.

forceParse

Boolean. 默認值: true

當選擇器關閉的時候，是否強制解析輸入框中的值。也就是說，當用戶在輸入框中輸入了不正確的日期，選擇器將會盡可能解析輸入的值，並將解析後的正確值按照給定的格式format設置到輸入框中。

minuteStep

Number. 默認值: 5

此數值被當作步進值用於構建小時視圖。對於每一個 minuteStep 都會生成一組預設時間（分鐘）用於選擇。

pickerReferer : 不建議使用

String. 默認值: 'default' (other value available : 'input')

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.

pickerPosition

String. 默認值: 'bottom-right' (還支持 : 'bottom-left')

此選項當前只在組件實現中提供支持。經過設置選項能夠講選擇器放倒輸入框下方。

viewSelect

Number or String. 默認值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')

With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated.

showMeridian

Boolean. 默認值: false

This option will enable meridian views for day and hour views.

initialDate

Date or String. 默認值: new Date()

You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...

標記

組件模版。

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

帶有重置按鈕（用於清空輸入框）的組件模版。

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

方法

.datetimepicker(options)

初始化日期時間選擇器。

remove

參數: None

移除日期時間選擇器。同時移除已經綁定的event、內部綁定的對象和HTML元素。

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

show

參數: None

顯示日期時間選擇器。

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

hide

參數: None

隱藏日期時間選擇器。

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

update

參數: None

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

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

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);

setEndDate

參數:

• endDate (String)

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

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

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

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

setDaysOfWeekDisabled

參數:

• daysOfWeekDisabled (String|Array)

Sets the days of week that should be disabled.

1. $('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);

Omit daysOfWeekDisabled (or provide an otherwise falsey value) to unset the disabled days.

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

事件（Events）

Datetimepicker 類暴露了一組event用以對日期進行操做。

show

當選擇器顯示時被觸發。

hide

當選擇器隱藏時被觸發。

changeDate

當日期被改變時被觸發。

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

changeYear

當十年視圖上的年視圖view被改變時觸發。

changeMonth

當年視圖上的月視圖view被改變時觸發。

outOfRange

當用戶選擇的日期超出startDate 或endDate 時，或者經過setDate 或 setUTCDate方法設置日期超出範圍時被觸發。

鍵盤支持

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

up, down, left, right 方向鍵

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

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

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

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

escape

escape 鍵能夠用來隱藏、從新顯示日期時間選擇器；當用戶但願手工編輯輸入框中的值是會頗有用。

enter

當選擇器處於顯示狀態時，enter鍵只是將其隱藏。當選擇器處於隱藏狀態時，enter鍵發揮一般的功能 - 提交當前表單，或者其餘。

I18N國際化

本插件支持月、每週中天的名稱、weekStart選項的國際化。默認是語言是English ('en');其它可使用的翻譯文件在js/locales/ 目錄中，只需在本插件以後引入須要的語言文件便可。須要增長額外語言支持的話，只需向 $.fn.datetimepicker.dates中增長一個key便可，必定要放在調用 .datetimepicker()以前。以下案例：

1. $.fn.datetimepicker.dates['en'] = {
2. days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
3. daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
4. daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
5. months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
6. monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
7. today: "Today"
8. };

Right-to-left languages may also include rtl: true to make the calendar display appropriately.

If your browser (or those of your users) is displaying characters wrong, chances are the browser is loading the javascript file with a non-unicode encoding. Simply add charset="UTF-8" to your script tag:

1. <script type="text/javascript" src="bootstrap-datetimepicker.de.js" charset="UTF-8"></script>

使用

綁定輸入框，並設置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();

 

 

 

1、應用場景

實際應用中可能會根據日期字段查詢某個日期範圍內的數據，則須要對日期選擇器可選時間進行限制，

如：開始時間不能大於結束時間，結束時間不能小於開始時間，此時就要爲開始日期選擇器和結束日期選擇器動態的設置startDate和endDate的值。

 

2、相關知識點

一、bootstrap-datepicker的初始化

引入bootstrap-datepicker.js和bootstrap-datepicker.css

bootstrap-datepicker配置參數的瞭解

二、boostrap-datepicker的changeDate事件：日期改變時觸發

三、bootstrap-datepicker的setEndDate和setStartDate方法

四、詳細配置參見官方文檔http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

3、應用實例

一、JSP中，聲明日期選擇器

 

<span style="font-size:14px;"><div class="col-md-6 cy-text-right-md">
    <div class="form-inline">
        <div class="form-group cy-mar-ver-s">
            <span class="cy-pad-hor-s">最後接入時間</span>
        </div>
        <div class="input-daterange input-group" id="datepicker">
            <input type="text" class="form-control" name="start" id="qBeginTime" />
            <span class="input-group-addon">至</span>
            <input type="text" class="form-control" name="end" id="qEndTime" />
        </div>
        <div class="form-group cy-mar-ver-s">
            <button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button>
        </div>
    </div>
</div></span>

 

 

 

二、JS中，對日期選擇器進行初始化和配置

 

             <span style="font-size:14px;"> //開始時間：
$('#qBeginTime').datepicker({
    todayBtn : "linked",
    autoclose : true,
    todayHighlight : true,
    endDate : new Date()
}).on('changeDate',function(e){
    var startTime = e.date;
    $('#qEndTime').datepicker('setStartDate',startTime);
});
//結束時間：
$('#qEndTime').datepicker({
    todayBtn : "linked",
    autoclose : true,
    todayHighlight : true,
    endDate : new Date()
}).on('changeDate',function(e){
    var endTime = e.date;
    $('#qBeginTime').datepicker('setEndDate',endTime);
});</span>

 

三、效果圖