Date Picker and Inputs

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

Subcomponents

Design

Usage:

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.

Usage:

{
    'appendTo': document.body,
    'autoClose': true,
    'autoHideOnBlur': true,
    'autoHideOnClick': true,
    'date': true,
    'dateValidator': Function.prototype,
    'dayFormat': 'DD',
    'initialValue': null,
    'inputFormat': moment.localeData().longDateFormat('L'),
    'invalidate': true,
    'max': null,
    'min': null,
    'monthFormat': 'MMM YYYY',
    'monthsInCalendar': 1,
    'required': false,
    'styles': {
        back: 'datepicker-back',
        container: 'datepicker',
        date: 'datepicker-date',
        dayBody: 'datepicker-days-body',
        dayBodyElem: 'datepicker-day',
        dayConcealed: 'datepicker-day-concealed',
        dayDisabled: 'is-disabled',
        dayHead: 'datepicker-days-head',
        dayHeadElem: 'datepicker-day-name',
        dayPrevMonth: 'datepicker-day-prev-month',
        dayNextMonth: 'datepicker-day-next-month',
        dayRow: 'datepicker-days-row',
        dayTable: 'datepicker-days',
        month: 'datepicker-month',
        monthLabel: 'datepicker-month',
        next: 'datepicker-next',
        positioned: 'datepicker-attachment',
        selectedDay: 'is-selected',
        selectedTime: 'datepicker-time-selected',
        time: 'datepicker-time',
        timeList: 'datepicker-time-list',
        timeOption: 'datepicker-time-option'
    },
    'time': false,
    'timeFormat': 'HH:mm',
    'timeInterval': 1800,
    'timeValidator': Function.prototype,
    'weekdayFormat': 'short',
    'weekStart': moment().weekday(0).day()
}

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