Skip to content

Latest commit

 

History

History
 
 

datepicker

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
docs
docs
 
 
test
test
 
 
datepicker.css
datepicker.css
 
 
datepicker.js
datepicker.js
 
 
index-nocss.js
index-nocss.js
 
 
index.js
index.js
 
 

readme.md

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

uib-datepicker settings

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

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.