Our datepicker is flexible and fully customizable.

You can navigate through days, months and years.

The datepicker has 3 modes:

• day - In this mode you're presented with a 6-week calendar for a specified month.
• month - In this mode you can select a month within a selected year.
• year - In this mode you are presented with a range of years (20 by default).

• ng-model $ - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.

• ng-model-options $ C (Default: {}) - Supported angular ngModelOptions:

  • allowInvalid
  • timezone

• template-url (Default: uib/template/datepicker/datepicker.html) - Add the ability to override the template used on the component.

Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the datepicker-options attribute:

• datepicker-options $ - An object to configure the datepicker in one place.

  • customClass ({date: date, mode: mode}) - An optional expression to add classes based on passing an object with date and current mode properties.

  • dateDisabled ({date: date, mode: mode}) - An optional expression to disable visible options based on passing an object with date and current mode properties.

  • datepickerMode C (Default: day) - Current mode of the datepicker (day|month|year). Can be used to initialize the datepicker in a specific mode.

  • formatDay C (Default: dd) - Format of day in month.

  • formatMonth C (Default: MMMM) - Format of month in year.

  • formatYear C (Default: yyyy) - Format of year in year range.

  • formatDayHeader C (Default: EEE) - Format of day in week header.

  • formatDayTitle C (Default: MMMM yyyy) - Format of title when selecting day.

  • formatMonthTitle C (Default: yyyy) - Format of title when selecting month.

  • initDate (Default: null) - The initial date view when no model value is specified.

  • maxDate C (Default: null) - Defines the maximum available date. Requires a Javascript Date object.

  • maxMode C (Default: year) - Sets an upper limit for mode.

  • minDate C (Default: null) - Defines the minimum available date. Requires a Javascript Date object.

  • minMode C (Default: day) - Sets a lower limit for mode.

  • monthColumns C (Default: 3) - Number of columns displayed in month selection.

  • ngModelOptions C (Default: null) - Sets ngModelOptions for datepicker. This can be overridden through attribute usage

  • shortcutPropagation C (Default: false) - An option to disable the propagation of the keydown event.

  • showWeeks C (Default: true) - Whether to display week numbers.

  • startingDay C (Default: $locale.DATETIME_FORMATS.FIRSTDAYOFWEEK) - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).

  • yearRows C (Default: 4) - Number of rows displayed in year selection.

  • yearColumns C (Default: 5) - Number of columns displayed in year selection.

Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

• Left: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
• Right: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
• Up: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
• Down: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
• PgUp: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
• PgDn: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
• Home: Move to the first date of the view.
• End: Move to the last date of the view.
• Enter/Space: Select date.
• Ctrl+Up: Move to an upper mode.
• Ctrl+Down: Move to a lower mode.
• Esc: Will close popup, and move focus to the input.

Notes

If the date a user enters falls outside of the min-/max-date range, a dateDisabled validation error will show on the form.