Standard Life Digital Framework

Date Picker

full screen new window example HTML markup

The Date Picker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay

Usage

The Date Picker uses the JQuery UI Date Picker. Use the Date input component and the Date Picker component together.

Setup

To use the Date Picker you must get JQuery and JQuery UI into your project. This can be done in multiple ways:

The Date Picker is fully customisable, here is the default behaviour for Standard Life used in this example.

$.datepicker.setDefaults({
    showOn: 'button',
    buttonText: '',
    showAnim: 'slideDown',
    showOtherMonths: true,
    minDate: new Date(),
    showButtonPanel: true,
    closeText: 'Close'
});

For more information, visit the API Documentation.

Modifier selectors

Modifier selector	Description
`slb-form__control-date`	Default form date input.
`slb-form__control-date-block`	Block form date input.

.slb-form__control-date - Default form control.

.slb-form__control-date-block - Block form control.

Markup: forms\date-picker.hbs

Copy

<form>
    <fieldset aria-label="Date">
        <legend>Start date</legend>

        <div class="slb-form__group-inline">
            <input type="text" class="[modifier class]" id="examplePickerText-[modifier class]-dd" placeholder="DD" size="3" />
            <label class="slb-form__label" for="examplePickerText-[modifier class]-dd">Day</label>
            <span class="slb-form__bar"></span>
        </div>

        <div class="slb-form__group-inline">
            <input type="text" class="[modifier class]" id="examplePickerText-[modifier class]-mm" placeholder="MM" size="3" />
            <label class="slb-form__label" for="examplePickerText-[modifier class]-mm">Month</label>
            <span class="slb-form__bar"></span>
        </div>

        <div class="slb-form__group-inline">
            <input type="text" class="[modifier class]" id="examplePickerText-[modifier class]-yyyy" placeholder="YYYY" size="5" />
            <label class="slb-form__label" for="examplePickerText-[modifier class]-yyyy">Year</label>
            <span class="slb-form__bar"></span>
        </div>
        <input id="slb-date-picker-[modifier class]" class="slb-date-picker" />
    </fieldset>
</form>

Source: components/forms/_date-picker.scss