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. {@embed ./date-picker.component.hbs}

Hierarchy

Properties

bindFromEvent componentName contentModel? data? defaultHtml handlebars

Accessors

configuration rootElement observedAttributes

Methods

attributeChangedCallback bindChildElements connectedCallback disconnectedCallback getContentModel interpolate onRender registerHelpers render renderContent

Properties

Protected bindFromEvent

bindFromEvent: boolean = false

Protected componentName

componentName: keyof HawkSearchComponents = 'date-picker'

Protected Optional contentModel

contentModel?: DatePickerComponentModel

The data bound to the Handlebars template.

Optional data

data?: undefined

The data bound to the component.

Protected defaultHtml

defaultHtml: any = defaultHtml

Protected handlebars

handlebars: typeof Handlebars = HawkSearch.handlebars

The Handlebars reference shared by all HawkSearch components.

Accessors

Protected configuration

  • get configuration(): undefined | TConfig

  • The optional configuration object for this component.

    Returns undefined | TConfig

rootElement

  • get rootElement(): ParentNode

  • The root element which should be used for querying any child elements. This resolves to this.shadowRoot if the Shadow DOM is enabled, otherwise this.

    Returns ParentNode

Static observedAttributes

  • get observedAttributes(): string[]

  • Returns string[]

Methods

attributeChangedCallback

  • Parameters

    • name: string
    • oldValue: null | string
    • newValue: null | string

    Returns void

Protected bindChildElements

  • After the component is rendered, this method is called to bind any child components.

    Returns void

connectedCallback

  • Returns void

disconnectedCallback

  • Returns void

Protected getContentModel

Protected interpolate

  • Replaces placeholders in a given string with values from a data object.

    Returns

    The template string with all placeholders replaced by the values specified in values.

    Parameters

    • template: string

      The template string.

    • values: Record<string, string>

      The object containing properties which will be bound to template.

    Returns string

Protected onRender

  • After the component is rendered, this method is called for any additional processing (such as attaching event listeners) which needs to occur.

    Returns void

Protected registerHelpers

  • Optional method that can be overwritten to register Handlebars helper functions which can be accessed from the template. For more information, see Custom Helpers.

    Returns void

render

Protected renderContent

  • Determines whether the data meets the necessary conditions to perform data binding and render content.

    Returns

    Whether the component should be rendered. If false, the component will have empty contents and be set to display: none;.

    Returns boolean

Settings

Member Visibility

Theme