Date Picker Component
- Jordan Kasper (Deactivated)
Overview
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.
Selector
The selector for this component is <hawksearch-date-picker>.
Component Attributes
Attribute Name | Attribute Value |
|---|---|
label |
|
min |
|
max |
|
value |
|
Data Model
The following data model is exposed to the Handlebars template:
interface CalendarDay {
date: Date;
value: string;
currentMonth: boolean;
enabled: boolean;
selected: boolean;
}{
value: string | undefined;
modalVisible: boolean;
monthSelectorVisible: boolean;
heading: string;
years: Array<number>;
months: Array<string>;
weeks: Array<Array<CalendarDay>>;
currentYear: number;
currentMonth: string;
}Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-input | Â |
The input element must have this attribute. When this element is clicked, the date picker modal will be displayed.
Attribute Name | Attribute Value |
|---|---|
hawksearch-modal | Â |
This root element of the date picker modal must have this attribute to calculate modal positioning.
Attribute Name | Attribute Value |
|---|---|
hawksearch-month | Â |
This attribute is used to identify the form element used to select a specific month.
Attribute Name | Attribute Value |
|---|---|
hawksearch-year | Â |
This attribute is used to identify the form element used to select a specific year.
Attribute Name | Attribute 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.
Attribute Name | Attribute Value |
|---|---|
hawksearch-previous | Â |
When an element with this attribute is clicked, the previous month will be displayed in the date picker modal.
Attribute Name | Attribute Value |
|---|---|
hawksearch-next | Â |
When an element with this attribute is clicked, the next month will be displayed in the date picker modal.
Attribute Name | Attribute 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.
Attribute Name | Attribute Value |
|---|---|
hawksearch-date |
|
When an element with this attribute is clicked, the specified date will be selected and displayed in the input element.
Events
Event Name | Data Type |
|---|---|
hawksearch:date-picker-changed |
|
This event fires whenever the user selects a date.
Handlebars Helpers
Name | Parameter |
|---|---|
dayOfMonth |
|
This helper function returns the zero-padded day of the month from a provided date object.
Default Template
<div class="date-picker">
<input type="text" value="{{value}}" hawksearch-input readonly class="date-picker__input" aria-label="{{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">Select Month</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">View Calendar</button>
</div>
</div>
{{else}}
<div class="date-picker__modal__header">
<a hawksearch-previous class="date-picker__modal__header__previous" title="Previous">
<hawksearch-icon name="chevron-left"></hawksearch-icon>
</a>
<a hawksearch-month-selector class="date-picker__modal__header__month">{{heading}}</a>
<a hawksearch-next class="date-picker__modal__header__next" title="Next">
<hawksearch-icon name="chevron-right"></hawksearch-icon>
</a>
</div>
<table class="date-picker__calendar" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">Su</th>
<th scope="col">Mo</th>
<th scope="col">Tu</th>
<th scope="col">We</th>
<th scope="col">Th</th>
<th scope="col">Fr</th>
<th scope="col">Sa</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>