Date Picker and Inputs

Allows the user to select a date from a calendar format as an alternative to manual input.




A date picker includes a grid of distinct calendar values, each of which has a single selected value—appearing in primary color circular background with value in the center. In addition each value has a single on hover state with a gray color circular background. Off-state hover background turns to none.

A picker is often displayed at the bottom of the text field when the user is editing a field or tapping on the calendar icon. Pickers can also appear inline, such as while editing a date in a Calendar event. The height of a picker is roughly the height of five rows of list values. The width of a picker is either the width of the screen or its enclosing view, depending on the device and context.




Datepickers are added with an attribute directive to a input element. It can also be displayed in line if the directive is in a non-input element.

BC Datepicker directive can be called with bc-datepicker attribute. I can be placed on a text input or a basic <div/>

It takes an optional attribute of options, which you can a JSON object to as defined below. Description of each option can be found in Rome's (Calendar) Repo