UNPKG

angular-ui-bootstrap-4

Version:

Native AngularJS (Angular) directives for Bootstrap

108 lines (86 loc) 4.46 kB
The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation [here](https://angular-ui.github.io/bootstrap/#/datepicker). ### 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](https://angular-ui.github.io/bootstrap/#/datepicker). * `alt-input-formats` <small class="badge">$</small> <small class="badge">C</small> _(Default: `[]`)_ - A list of alternate formats acceptable for manual entry. * `clear-text` <small class="badge">C</small> _(Default: `Clear`)_ - The text to display for the clear button. * `close-on-date-selection` <small class="badge">$</small> <small class="badge">C</small> _(Default: `true`)_ - Whether to close calendar when a date is chosen. * `close-text` <small class="badge">C</small> _(Default: `Done`)_ - The text to display for the close button. * `current-text` <small class="badge">C</small> _(Default: `Today`)_ - The text to display for the current day button. * `datepicker-append-to-body` <small class="badge">$</small> <small class="badge">C</small> _(Default: `false`, Config: `appendToBody`)_ - Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. * `datepicker-options` <small class="badge">$</small> - An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker. * `datepicker-popup-template-url` <small class="badge">C</small> _(Default: `uib/template/datepickerPopup/popup.html`)_ - Add the ability to override the template used on the component. * `datepicker-template-url` <small class="badge">C</small> _(Default: `uib/template/datepicker/datepicker.html`)_ - Add the ability to override the template used on the component (inner uib-datepicker). * `is-open` <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> _(Default: `false`)_ - Whether or not to show the datepicker. * `ng-model` <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> - 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` <small class="badge">$</small> <small class="badge">C</small> _(Default: `true`)_ - Whether or not to focus the datepicker popup upon opening. * `show-button-bar` <small class="badge">$</small> <small class="badge">C</small> _(Default: `true`)_ - Whether or not to display a button bar underneath the uib-datepicker. * `type` <small class="badge">C</small> _(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` <small class="badge">C</small> _(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` <small class="badge">C</small> _(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.