Skip to content

docs

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

docs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo.html
demo.html
 
 
demo.js
demo.js
 
 
readme.md
readme.md
 
 

readme.md

Our datepicker is flexible and fully customizable.

You can navigate through days, months and years.

It comes in two formats, an inline uib-datepicker and an uib-datepicker-popup to be embedded in an input.

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

uib-datepicker settings

  • custom-class (date, mode) $ - An optional expression to add classes based on passing a date and current mode.

  • date-disabled (date, mode) $ - An optional expression to disable visible options based on passing a date and current mode.

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

  • datepicker-options $ - An optional object to configure the datepicker in one place. If this attribute is used, all supported options must be specified instead of the attributes.

    The supported options are:

    • formatDay
    • formatDayHeader
    • formatDayTitle
    • formatMonth
    • formatMonthTitle
    • formatYear
    • initDate
    • maxDate
    • maxMode
    • minDate
    • minMode
    • shortcutPropagation
    • showWeeks
    • startingDay
    • yearColumns
    • yearRows

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

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

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

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

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

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

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

  • max-date $ C (Default: null) - Defines the maximum available date.

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

  • min-date $ C (Default: null) - Defines the minimum available date.

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

  • ng-model $ - The date object. Needs to be a Javascript Date object.

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

    • allowInvalid
    • timezone

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

  • show-weeks $ C (Default: true) - Whether to display week numbers.

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

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

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

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

uib-datepicker-popup settings

The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use datepicker-options.

  • alt-input-formats $ C (Default: []) - A list of alternate formats acceptable for manual entry.

  • clear-text C (Default: Clear) - The text to display for the clear button.

  • close-on-date-selection $ C (Default: true) - Whether to close calendar when a date is chosen.

  • close-text C (Default: Done) - The text to display for the close button.

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

  • datepicker-append-to-body $ C (Default: false, Config: appendToBody) - Append the datepicker popup element to body, rather than inserting after datepicker-popup.

  • datepicker-options $ - An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.

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

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

  • is-open $ (Default: false) - Whether or not to show the datepicker.

  • on-open-focus $ C (Default: true) - Whether or not to focus the datepicker popup upon opening.

  • show-button-bar $ C (Default: true) - Whether or not to display a button bar underneath the uib-datepicker.

  • type C (Default: text, Config: html5Types) - You can override the input type to be (date|datetime-local|month). That will change the date format of the popup.

  • popup-placement C (Default: auto bottom-left, Config: 'placement') - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:

    • top - popup on top, horizontally centered on input element.
    • top-left - popup on top, left edge aligned with input element left edge.
    • top-right - popup on top, right edge aligned with input element right edge.
    • bottom - popup on bottom, horizontally centered on input element.
    • bottom-left - popup on bottom, left edge aligned with input element left edge.
    • bottom-right - popup on bottom, right edge aligned with input element right edge.
    • left - popup on left, vertically centered on input element.
    • left-top - popup on left, top edge aligned with input element top edge.
    • left-bottom - popup on left, bottom edge aligned with input element bottom edge.
    • right - popup on right, vertically centered on input element.
    • right-top - popup on right, top edge aligned with input element top edge.
    • right-bottom - popup on right, bottom edge aligned with input element bottom edge.

  • uib-datepicker-popup C (Default: yyyy-MM-dd, Config: datepickerConfig) - The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. yyyy-MM-dd h 'o\'clock'.

Note: With the exception of ng-model[-options] and templateUrl, you can configure the wrapped datepicker using its attributes in the popup as well. But beware this possibility may be deprecated on the near future.

Keyboard support

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.

If using this directive on input type date, a native browser datepicker could also appear.