基于Bootstrap 3的jQuery日期时间选择器-爱编程

基于Bootstrap 3的jQuery日期时间选择器

来源：htmleaf 阅读：12 时间：2018-02-04 01:25

bootstrap-datetimepicker是一款基于Bootstrap 3的超实用jQuery日期时间选择器。通过该jQuery插件你可以非常容易的创建很酷的bootstrap样式的日期时间选择器。你也可以通过修改css文件来自定义它的样式。

安装

该jQuery日期时间选择器的最小外部依赖需求是：

jQuery
Moment.js
Bootstrap.js(如果你不想使用完整的bootstrap，至少需要transition 和collapse)
Bootstrap Datepicker script
Bootstrap CSS
Bootstrap Datepicker CSS
Moment.js文件可以在这里下载。(关于Moment请看这篇文章)

可以通过Bower来按钮该jQuery日期时间选择器插件。

bower install eonasdan-bootstrap-datetimepicker#latest --save

生成的文件包括了必要的css和js文件：

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

配置参数

format：Default: false。有效的格式可以查看momentjs的文档。Format 同时也决定容器的显示方式。例如:MM/dd/YYYY将不会显示时间选择器。
dayViewHeaderFormat：Default: 'MMMM YYYY'。在 "days" 视图中改变日期选择器的标题。
extraFormats：Default: false。允许多种输入格式是有效的。查看这里。
stepping：Default: 1。时间选择器中分钟的上下箭头移动分钟的数值。

minDate：

Default: false  
Accepts: date, moment, string

该日期前的日期时间不可选择。

maxDate：
```
Default: false
Accepts: date, moment, string
```
该日期后的日期时间不可选择。
useCurrent：Default: true。在日期时间选择器显示时，显示当前的日期时间。
collapse：Default: true。使用 Bootstraps collapse 来切换日期和时间选择器。
locale：
```
Default: moment.locale()
Accepts: string, moment.local('locale')  
```
有效的格式可以查看momentjs的文档。你必须引入moment-with-locales.js文件。
defaultDate：
```
Default: false
Accepts: date, moment, string 
```
设置默认的日期和时间选择器。覆盖useCurrent。
disabledDates：
```
Default: false
Accepts: array of [date, moment, string]
```
在数组中的日期不能被选择，例如节假日。
enabledDates：
```
Default: false
Accepts: array of [date, moment, string]
```
不在数组中的日期将不能被选择。

icons：

 Default: {
  time: 'glyphicon glyphicon-time'
  date: 'glyphicon glyphicon-calendar'
  up: 'glyphicon glyphicon-chevron-up'
  down: 'glyphicon glyphicon-chevron-down'
  previous: 'glyphicon glyphicon-chevron-left'
  next: 'glyphicon glyphicon-chevron-right'
  today: 'glyphicon glyphicon-screenshot'
  clear: 'glyphicon glyphicon-trash'
 }  
 Accepts: object with all or some of the parameters above

改变选择器默认你的图标。

useStrict：Default: false。Defines if moment should use scrict date parsing when considering a date to be valid。
sideBySide：Default: false。当同时使用日期时间选择器时将它们并排排列。
daysOfWeekDisabled：
```
Default: []
Accepts: array of numbers from 0-6  
```
不允许选择一个星期中的某些天。
calendarWeeks：Default: false。Shows the week of the year to the left of first day of the week.
viewMode：
```
Default: 'days'
Accepts: 'years','months','days'  
```
选择器显示时的默认视图。

Note: To limit the picker to selecting, for instance the year and month, use format: MM/YYYY.

toolbarPlacement：

Default: 'default'
Accepts: 'default', 'top', 'bottom'

改变工具栏上的图标。

Bootstrap日期时间选择器-toolbarPlacement

showTodayButton：Default: false。在工具栏上显示"Clear"按钮，点击该按钮将情况选择器。

widgetPositioning：

Default: {
            horizontal: 'auto'
            vertical: 'auto'
         }
Accepts: object with the all or one of the parameters above
         horizontal: 'auto', 'left', 'right'
         vertical: 'auto', 'top', 'bottom'

widgetParent：
```
Default: null
Accepts: string or jQuery object  
```
On picker show, places the widget at the identifier (string) or jQuery object if the element has css position: 'relative'
keepOpen：Default: false。Will cause the date picker to stay open after selecting a date if no time components are being used.

方法

destroy()：销毁日期时间选择器并移除所有的事件。
toggle()：显示或隐藏日期时间选择器。
Emits：
- hide.dp：如果在该方法调用时组件的状态时隐藏的。
- show.dp：如果在该方法调用时组件的状态时可见的。
- change.dp： if the widget is opened for the first time and the input element is empty and options.useCurrent != false
show()：显示日期时间选择器。
Emits：
- show.dp：如果在该方法调用时组件的状态时隐藏的。
- change.dp：如果组件是第一次打开，并且useCurrent设置为true，并且input元素上为空值。
hide()：隐藏日期时间选择器。
Emits：
- hide.dp：如果在该方法调用时组件的状态时可见的。
disable()：设置input元素为不可用状态。通过设置disabled="true"可以使组件也不可用。如果在该方法调用时组件的状态时可见的，将设置其为不可见。
Emits：
- hide.dp：如果在该方法调用时组件的状态时可见的。
enable()：设置input元素为可用状态。通过移除disabled可以使组件也可用。
date()：返回组件的当前日期。一个moment对象或null（未设置值）
date([newDate])：设置组件的当前moment为newDate string, Date, moment, null。设置为null则不改变当前组件的值。通过moment库的options.format和options.useStrict来解析新的日期时间。
Throws：
- TypeError ：newDate不能被解析。
Emits：
- change.dp ：newDate与当前日期不同。
disabledDates()：返回当前设置为不可用的日期的数组。设置一个[ string or Date or moment ]值，不允许用户选择它们。该方法优先于options.minDate和options.maxDate配置。也可以通过该方法移除options.enabledDates配置参数。
Note: These values are matched with Day granularity.
enabledDates()：返回当前设置为可用的日期的数组。
enabledDates(dates)：于disabledDates(dates)用法相反。
defaultDate()：返回一个带options.defaultDate或false参数的moment对象。
defaultDate(defaultDate)：通过string, Date, moment, boolean:false参数设置选择器的初始状态。如果options.defaultDate设置了boolean:false，参数将被清空。
useCurrent()：通过options.useCurrent返回一个布尔值或字符串。
useCurrent(boolean or string)：
参数为boolean或string。If a boolean true is passed and the components model moment is not set (either through setDate or through a valid value on the input element the component is attached to) then the first time the user opens the datetimepicker widget the value is initialized to the current moment of the action. If a false boolean is passed then no initialization happens on the input element. You can select the granularity on the initialized moment by passing one of the following strings ('year', 'month', 'day', 'hour', 'minute') in the variable.
If for example you pass 'day' to the setUseCurrent function and the input field is empty the first time the user opens the datetimepicker widget the input text will be initialized to the current datetime with day granularity (ie if currentTime = 2014-08-10 13:32:33 the input value will be initialized to 2014-08-10 00:00:00)
Note: If the options.defaultDate is set or the input element the component is attached to has already a value that takes precedence and the functionality of useCurrent is not triggered!

该日期时间选择器还有很多事件，具体请看这里。

在线预览源码下载