【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：是否选择完后自动关闭

formatString. 默认值: '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 fileP : meridian in upper case ('AM' or 'PM') - according to locale files : seconds without leading zerosss : seconds, 2 digits with leading zerosi : minutes without leading zerosii : minutes, 2 digits with leading zerosh : hour without leading zeros - 24-hour formathh : hour, 2 digits with leading zeros - 24-hour formatH : hour without leading zeros - 12-hour formatHH : hour, 2 digits with leading zeros - 12-hour formatd : day of the month without leading zerosdd : day of the month, 2 digits with leading zerosm : numeric representation of month without leading zerosmm : numeric representation of the month, 2 digits with leading zerosM : short textual representation of a month, three lettersMM : full textual representation of a month, such as January or Marchyy : two digit representation of a yearyyyy : full numeric representation of a year, 4 digitsweekStartInteger. 默认值：0一周从哪一天开始。0（星期日）到6（星期六）startDateDate. 默认值：开始时间The earliest date that may be selected; all earlier dates will be disabled.endDateDate. 默认值：结束时间The latest date that may be selected; all later dates will be disabled.daysOfWeekDisabledString, 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].autocloseBoolean. 默认值：false当选择一个日期之后是否立即关闭此日期时间选择器。startViewNumber, String. 默认值：2, 'month'日期时间选择器打开之后首先显示的视图。 可接受的值：0 or 'hour' for the hour view1 or 'day' for the day view2 or 'month' for month view (the default)3 or 'year' for the 12-month overview4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.minViewNumber, String. 默认值：0, 'hour'日期时间选择器所能够提供的最精确的时间选择视图。maxViewNumber, String. 默认值：4, 'decade'日期时间选择器最高能展示的选择范围视图。todayBtnBoolean, "linked". 默认值: false如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。todayHighlightBoolean. 默认值: false如果为true, 高亮当前日期。keyboardNavigationBoolean. 默认值: true是否允许通过方向键改变日期。languageString. 默认值: '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.forceParseBoolean. 默认值: true当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。minuteStepNumber. 默认值: 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.pickerPositionString. 默认值: 'bottom-right' (还支持 : 'bottom-left')此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。viewSelectNumber 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.showMeridianBoolean. 默认值: falseThis option will enable meridian views for day and hour views.initialDateDate 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});

 

　　在下载的文件里有部分实例。