Datepickers datepicker.js

mgcrea.ngStrap.datepicker

Examples

Add datepicker functionality with any form text input.

Plugin dependency

Datepickers require the tooltip module and dateParser helper module to be loaded.

These docs currently use bootstrap-additions for styling purposes.

Support for locales

This module leverages the $locale service. You just have to load the proper i18n file to seamlessly translate your datepickers.

Live demo 

$scope.selectedDate = {{selectedDate}}; // <- {{ getType('selectedDate') }}
$scope.selectedDateAsNumber = {{selectedDateAsNumber}}; // <- {{ getType('selectedDateAsNumber') }}
$scope.fromDate = {{fromDate}}; // <- {{ getType('fromDate') }}
$scope.untilDate = {{untilDate}}; // <- {{ getType('untilDate') }}

Usage

Append a bs-datepickerattribute to any element to enable the directive.

The module exposes a $datepickerservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myDatepicker = $datepicker(element, ngModelController);

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

This module supports exotic placement options!

You can position your datepicker in corners (such as bottom-left) or any other combination two.

Exotic placement options are not part of the Bootstrap's core, to use them you must use bootstrap-additions.css from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for these docs.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the datepicker - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left.
When "auto" is specified, it will dynamically reorient the datepicker. For example, if placement is "auto left", the datepicker will display to the left when possible, otherwise it will display right.
trigger string 'focus' how datepicker is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the datepicker (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the datepicker to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the datepicker in the flow of the document near the triggering element - which will prevent the datepicker from floating away from the triggering element during a window resize.
template path | id '$datepicker'

If provided, overrides the default template, can be either a remote URL or a cached template id.
dateFormat string 'shortDate'

Rendering format of your date, leverages ng.filter:date.
modelDateFormat string null

Model format of your date, leverages ng.filter:date.
dateType string 'date'

Expected model type of your date - date | number | unix | iso | string

If type is "number" then datepicker uses milliseconds to set date, if "unix" - seconds
autoclose boolean false

Whether the picker should close itself upon select.
useNative boolean false

Whether to use a native component if available (iOS/Android).
minDate date* -Infinity

Minimum allowed date for selection (* fed into the Date constructor). You can use the string "today" that will resolve the current date.
maxDate date* +Infinity

Maximum allowed date for selection (* fed into the Date constructor). You can use the string "today" that will resolve the current date.
startView number 0

View that sould be opened by default - 0 | 1 | 2.
minView number 0

Minimum allowed view - 0 | 1 | 2. 1 will only allow month selection.
startWeek number 0

First day of the week (0 - Sunday, 1 - Monday, 2 - Tuesday, etc.)
startDate date* today

Date that should be opened by default.
iconLeft string 'glyphicon glyphicon-chevron-left'

CSS class for 'left' icon.
iconRight string 'glyphicon glyphicon-chevron-right'

CSS class for 'right' icon.
daysOfWeekDisabled string ''

List of decimal days of the week values that are disabled and hence cannot be selected. For example, '06' disables Sunday and Saturday, '12345' disables Monday to Friday.
disabledDates array of date ranges []

Array of date ranges to disable.

Example date range: { start: new Date(2010, 11, 24), end: new Date(2010, 11, 25) }

Default options

You can override global defaults for the plugin with $datepickerProvider.defaults

        
          angular.module('myApp')
          .config(function($datepickerProvider) {
            angular.extend($datepickerProvider.defaults, {
              dateFormat: 'dd/MM/yyyy',
              startWeek: 1
            });
          })