The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation here.

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 as documented in the inline datepicker.

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

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

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

Notes

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