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-textC (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-textC (Default:Done) - The text to display for the close button. -
current-textC (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 tobody, rather than inserting afterdatepicker-popup. -
datepicker-options$ - An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker. -
datepicker-popup-template-urlC (Default:uib/template/datepickerPopup/popup.html) - Add the ability to override the template used on the component. -
datepicker-template-urlC (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 JavascriptDateobject. You may use theuibDateParserservice 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. -
typeC (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-placementC (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-popupC (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.