【Bootstrap】Bootstrap Datepicker使用


 

 

  插件:http://url.cn/V4S8w4

  1、添加樣式和引用JS文件

<link href="CSS/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>

  如果使用漢化版,引入漢化版,這個JS也在那個下載的文件夾里,並把language設置為“zh-CN”:

<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>

  2、設置

  format日期格式:(這個和一般的不一樣,開始我就設錯了,后來查了才知道)          

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

  maskInput: true, // disables the text input mask 

      pickDate: true, // disables the date picker

  pickTime: true, // disables de time picker

  pick12HourFormat: false, // enables the 12-hour format time picker

    pickSeconds: true, // disables seconds in the time picker

  startDate: -Infinity, // set a minimum date

  endDate: Infinity // set a maximum date    

  hourStep: 小時的間隔

  minuteStep:分鍾的間隔

  secondStep:

  laguage:'en' //zh-CN 

  autoclose:是否選擇完后自動關閉

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 ...
設置

  3、例子

<input id="txtDtbegin" name="dtBegin" value="<%=dt2 %>" type="text"  class="form-control">
$('#txtDtbegin').datetimepicker({
                format: 'yyyy-mm-dd hh:ii:ss',
                language: 'zh-CN',
                pickDate: true,
                pickTime: true,
                inputMask: true,
                pickerPosition: "bottom-left",
                autoclose: true
            });

 

  在下載的文件里有部分實例。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM