Angular UI Bootstrap Date Time Picker

Module License: MIT

Added by: Sam Deering





Stars: 65

Watchers: 65

Forks: 24

Module Description

Angular UI
Bootstrap Date Time Picker


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.


<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.

  • current-text (Default: 'Today') : The text to display for the current day button.

  • 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.

Module stats last updated: 2018-01-01 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!