UNPKG

angular-ui-bootstrap-2.0

Version:

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular-ui/bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Build Status](https://secure.travis-ci.org/angular-ui/bootstrap.svg)](http://travis-

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.