Angular UI
Bootstrap Date Time Picker
Demo: http://plnkr.co/edit/2JByf4?p=preview
The control is based on AngularUI Datepicker and Timepicker.
Date is formatted using the date filter and thus is also localized.
##Bower Install
Run bower install angular-ui-bootstrap-datetimepicker --save
to persist it to bower.json
Include the ui.bootstrap.datetimepicker
module in your app.js
file. You must be using the ui.bootstrap
module as well.
###Usage
<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep" minute-step="minuteStep" ng-model="date" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions" date-disabled="disabled(date, mode)" readonly-time="false"></datetimepicker>
Datetimepicker Settings
-
ng-model
:
The date and time object.
-
starting-day
(Defaults: 0) :
Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
-
min-date
(Default: null) :
Defines the minimum available date.
-
max-date
(Default: null) :
Defines the maximum available date.
-
date-disabled (date, mode)
(Default: null) :
An optional expression to disable visible options based on passing date and current mode (day|month|year).
-
day-format
(Default: 'dd') :
Format of day in month.
-
month-format
(Default: 'MMMM') :
Format of month in year.
-
year-format
(Default: 'yyyy') :
Format of year in year range.
-
year-range
(Default: 20) :
Number of years displayed in year selection.
-
day-header-format
(Default: 'EEE') :
Format of day in week header.
-
day-title-format
(Default: 'MMMM yyyy') :
Format of title when selecting day.
-
month-title-format
(Default: 'yyyy') :
Format of title when selecting month.
-
date-format
(Default: 'yyyy-MM-dd') :
The format for displayed dates.
-
datepicker-options
attribute.
(Default: {}) :
Options for datepicker in JSON format
-
hour-step
(Defaults: 1) :
Number of hours to increase or decrease when using a button.
-
minute-step
(Defaults: 1) :
Number of minutes to increase or decrease when using a button.
-
show-meridian
(Defaults: true) :
Whether to display 12H or 24H mode.
-
meridians
(Defaults: ['AM', 'PM']) :
Meridian labels
-
readonly-time
(Defaults: false) :
Whether user can type inside the hours & minutes input.
-
mousewheel
(Defaults: true) :
Whether user can scroll inside the hours & minutes input to increase or decrease it's values.