Class DatePickerComponent

The Date Picker component provides an intuitive interface that allows the user to select a range in ISO format. This component is currently only used within the Date Range Facet Component.

Tag

The tag for this component is <hawksearch-date-picker>.

Attributes

Name	Value
label	string
min	Date
max	Date
value	Date

Event-Binding Attributes

Name	Value
hawksearch-input

The input element must have this attribute. When this element is clicked, the date picker modal will be displayed.

Name	Value
hawksearch-modal

This root element of the date picker modal must have this attribute to calculate modal positioning.

Name	Value
hawksearch-month

This attribute is used to identify the form element used to select a specific month.

Name	Value
hawksearch-year

This attribute is used to identify the form element used to select a specific year.

Name	Value
hawksearch-select-month

When an element with this attribute is clicked, the month specified by hawksearch-month and hawksearch-year to be displayed in the date picker modal.

Name	Value
hawksearch-previous

When an element with this attribute is clicked, the previous month will be displayed in the date picker modal.

Name	Value
hawksearch-next

When an element with this attribute is clicked, the next month will be displayed in the date picker modal.

Name	Value
hawksearch-month-selector

When an element with this attribute is clicked, the month selector will be displayed in the date picker modal to quickly jump to a particular month rather than using pagination.

Name	Value
hawksearch-date	string (ISO date format)

When an element with this attribute is clicked, the specified date will be selected and displayed in the input element.

Events

Name	Data Type
hawksearch:date-picker-changed	Date

This event fires whenever the user selects a date.

Handlebars Helpers

Name	Parameter
dayOfMonth	Date

This helper function returns the zero-padded day of the month from a provided date object.

Default Template

The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.

<div class="date-picker">
    <input type="text" value="{{value}}" hawksearch-input readonly class="date-picker__input" aria-label="{{strings.label}}" />
    {{#if modalVisible}}
        <div hawksearch-modal class="date-picker__modal">
            {{#if monthSelectorVisible}}
                <div class="date-picker__modal__header">
                    <span class="date-picker__modal__header__month">{{strings.selectMonth}}</span>
                </div>
                <div class="row">
                    <div class="column column--12">
                        <select hawksearch-month>
                            {{#each months}}
                                {{#if (eq this @root.currentMonth)}}
                                    <option value="{{@index}}" selected>{{this}}</option>
                                {{else}}
                                    <option value="{{@index}}">{{this}}</option>
                                {{/if}}
                            {{/each}}
                        </select>
                    </div>
                    <div class="column column--12">
                        <select hawksearch-year>
                            {{#each years}}
                                {{#if (eq this @root.currentYear)}}
                                    <option value="{{this}}" selected>{{this}}</option>
                                {{else}}
                                    <option value="{{this}}">{{this}}</option>
                                {{/if}}
                            {{/each}}
                        </select>
                    </div>
                    <div class="column column--12">
                        <button hawksearch-select-month class="button button--full-width">{{strings.viewCalendar}}</button>
                    </div>
                </div>
            {{else}}
                <div class="date-picker__modal__header">
                    <a hawksearch-previous class="date-picker__modal__header__previous" title="{{strings.previous}}">
                        <hawksearch-icon name="chevron-left"></hawksearch-icon>
                    </a>
                    <a hawksearch-month-selector class="date-picker__modal__header__month">{{strings.heading}}</a>
                    <a hawksearch-next class="date-picker__modal__header__next" title="{{strings.next}}">
                        <hawksearch-icon name="chevron-right"></hawksearch-icon>
                    </a>
                </div>
                <table class="date-picker__calendar" cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th scope="col">{{dayAbbreviation 0}}</th>
                            <th scope="col">{{dayAbbreviation 1}}</th>
                            <th scope="col">{{dayAbbreviation 2}}</th>
                            <th scope="col">{{dayAbbreviation 3}}</th>
                            <th scope="col">{{dayAbbreviation 4}}</th>
                            <th scope="col">{{dayAbbreviation 5}}</th>
                            <th scope="col">{{dayAbbreviation 6}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each weeks}}
                            <tr>
                                {{#each this}}
                                    <td
                                        hawksearch-date="{{value}}"
                                        class="date-picker__calendar__day
                                            {{attribute ' date-picker__calendar__day--alternate' (eq currentMonth false)}}
                                            {{attribute ' date-picker__calendar__day--selected' selected}}
                                            {{attribute ' date-picker__calendar__day--disabled' (eq enabled false)}}"
                                    >
                                        <span>{{dayOfMonth date}}</span>
                                    </td>
                                {{/each}}
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            {{/if}}
        </div>
    {{/if}}
</div>
Copy