<DatePicker> is the calendar date picker — wraps `air-datepicker`. Accepts the full air-datepicker option set plus LogisBase-friendly callbacks.

`<DatePicker>`

A calendar-based date picker. Internally wraps the air-datepicker library — every air-datepicker option is supported as an @-arg.

For combined date + time inputs, use <DateTimeInput>.

Basic Usage

<DatePicker
  @value={{this.start_date}}
  @placeholder='Start date'
  @onChange={{fn (mut this.start_date)}}
/>

Range Selection

<DatePicker
  @range={{true}}
  @value={{this.dateRange}}
  @onChange={{this.onDateRangeChange}}
/>

When @range={{true}}, the value is an array of two dates.

Inline Calendar

To always render the calendar (instead of a popover):

<DatePicker
  @inline={{true}}
  @value={{this.date}}
  @onChange={{fn (mut this.date)}}
/>

Custom Format

The default format is yyyy-MM-dd. Override with @dateFormat:

<DatePicker
  @dateFormat='dd/MM/yyyy'
  @value={{this.date}}
  @onChange={{fn (mut this.date)}}
/>

Arguments

Argument	Type	Default	Description
`@value`	Date \| Date[] \| string	—	The current value (or comma-separated string for range)
`@dateFormat`	string	`yyyy-MM-dd`	Display format
`@placeholder`	string	—	Input placeholder
`@inline`	boolean	`false`	Render the calendar inline
`@range`	boolean	—	Allow range selection
`@class`	string	—	Extra classes on the input

Plus every air-datepicker option — multipleDates, minDate, maxDate, disableNavWhenOutOfRange, view, minView, firstDay, etc. Pass any of them as @-args.

Callbacks

Argument	Signature	Description
`@onSelect`	`(selection)`	Called with the air-datepicker selection object
`@onChange`	`(date)`	Called with the selected `Date`
`@onDateChanged`	`(formattedDate)`	Called with the formatted string

Real-World Examples

{{! Inside a form group }}
<InputGroup @name='Date of birth'>
  <DatePicker
    @value={{this.driver.date_of_birth}}
    @onChange={{fn (mut this.driver.date_of_birth)}}
  />
</InputGroup>

{{! Range filter }}
<DatePicker
  @range={{true}}
  @value={{this.dateRange}}
  @onChange={{this.applyDateFilter}}
  @placeholder='Date range'
/>

Source

File	Description
`addon/components/date-picker.hbs`	Template
`addon/components/date-picker.js`	Class — wraps `air-datepicker`

DatePicker

On this page