Skip to content

Latest commit

 

History

History
 
 

datepickerPopup

Folders and files

NameName
Last commit message
Last commit date

parent directory

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

readme.md

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.