Date picker

Easily select dates and time, based on the flatpickr library.

Import

import '@amber-ds/components/date';

Markup

<amber-date
  value="2028-12-01"
>
</amber-date>

Attributes

Name	Type	Default value	Description
`inline`	`Boolean`	`false`	If the datepicker will be shown inline within the content
`disabled`	`Boolean`	`false`	If input element is disabled
`time`	`Boolean`	`false`	Shortcut for the Flatpicker `enableTime` option
`mode`	`String`	`single`	Shortcut for the Flatpickr `mode` option, options: `'single'`, `'multiple'` or `'range`
`value`	`String`	N/A	Starting value in the `YYYY-MM-DD` format

Note: this component read the attributes values only on the datepicker setup, which occurs during the component initialization. For instance, you can't change from default view to inline after the datepicker has been rendered.

Properties

Name	Type	Default value	Description
`config`	`Object`	{}	A Flatpickr option object
`flatpickr`	`Function`	N/A	A reference to the Flatpickr instance

Methods

Name	Arguments	Return	Description
`.open()`	N/A	N/A	Show the datepicker widget
`.close()`	N/A	N/A	Hide the datepicker widget

Events

Name	Detail	Description
`change`	`{ dateStr: String,` `selectedDates: Array<String>,` `instance: Object }`	Fired each the user select a date from the widget, it returns the values in string and array format and also a reference to the Flatpickr instance

# Date picker

# Import

# Markup

# Attributes

# Properties

# Methods

# Events

# Storybook

Date picker

Import

Markup

Attributes

Properties

Methods

Events

Storybook