Bootstrap Date Time Picker
Angular UIThe plugin is based on AngularUI Datepicker and Timepicker.
Demo: Plunker
Date is formatted using the date filter and is localized.
Install
NPM
Run npm install angular-ui-bootstrap-datetimepicker
to install. Use the --save
option to add it to your package.json's dependencies.
If you're using browserify, you can simply require('angular-ui-bootstrap-datetimepicker')
to make it available in your angular project. Ensure that your angular module depends on ui.bootstrap.datetimepicker
. You must be using the ui.bootstrap
module as well - also availbe via npm.
Also include the stylesheet datetimepicker.css
in your html. Note that this is the same stylesheet that the package.json's style
declaration has.
Bower
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.
NuGet
See https://www.nuget.org/packages/Angular-js-bootstrap-datetimepicker/
Usage Sample
// Disable weekend selection$scope { return mode === 'day' && currentDate === 0 || currentDate === 6;};
Datetimepicker Settings
-
clear-text
(Default: 'Clear') : The text to display for the clear button. -
close-text
(Default: 'Done') : The text to display for the close popup button. -
current-text
(Default: 'Today') : The text to display for the current day button. -
datepicker-append-to-body
(Default: false) : Append the datepicker popup element to body, rather than inserting after datepicker-popup. -
datepicker-popup-template-url
(Default: uib/template/datepickerPopup/popup.html) : Add the ability to override the template used on the component. -
datepicker-template-url
(Default: uib/template/datepicker/datepicker.html) : Add the ability to override the template used on the component (inner uib-datepicker). -
date-disabled (date, mode)
(Default: null) : An optional expression to disable visible options based on passing date and current mode (day|month|year). -
date-format
(Default: 'yyyy-MM-dd') : The format for displayed dates. -
date-ng-click
(Default: null) : A function called when a date input is clicked. -
date-opened
(Default: false) : Whether or not to show the datepicker. -
date-options
attribute. (Default: {}) : Options for datepicker in JSON format. E.g. minDate and maxDate, which define the minimum and maximum available date and time. -
day-format
(Default: 'dd') : Format of day in month. -
day-header-format
(Default: 'EEE') : Format of day in week header. -
day-title-format
(Default: 'MMMM yyyy') : Format of title when selecting day. -
disabled-date
(Defaults: false) : Whether the date input is disabled. -
hidden-date
(Defaults: false) : Whether a user can see the date input. -
hidden-time
(Defaults: false) : Whether a user can see the hours & minutes input. -
hour-step
(Defaults: 1) : Number of hours to increase or decrease when using a button. -
max-time
(Defaults: ['12:59 PM']) : Maximum time for time picker (Date). -
meridians
(Defaults: ['AM', 'PM']) : Meridian labels -
min-time
(Defaults: ['0:00 AM']) : Minumum time for time picker (Date). -
minute-step
(Defaults: 1) : Number of minutes to increase or decrease when using a button. -
month-format
(Default: 'MMMM') : Format of month in year. -
month-title-format
(Default: 'yyyy') : Format of title when selecting month. -
mousewheel
(Defaults: true) : Whether user can scroll inside the hours & minutes input to increase or decrease it's values. -
ng-model
: The date and time object. -
readonly-date
(Defaults: false) : Whether a user can type inside the date input. -
readonly-time
(Defaults: false) : Whether a user can type inside the hours & minutes input. -
show-button-bar
(Defaults: true) : Whether or not to display a button bar underneath the uib-datepicker.. -
show-meridian
(Defaults: true) : Whether to display 12H or 24H mode. -
show-spinners
(Defaults: true) : Shows spinner arrows above and below the inputs. -
timepicker-template-url
(Defaults: uib/template/timepicker/timepicker.html) : Add the ability to override the template used on the component. -
year-format
(Default: 'yyyy') : Format of year in year range. -
year-range
(Default: 20) : Number of years displayed in year selection.