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'
改变工具栏上的图标。
- 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 andoptions.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 throughsetDate
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 thesetUseCurrent
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 to2014-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 ofuseCurrent
is not triggered!
该日期时间选择器还有很多事件,具体请看这里。