Date picker

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


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




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.


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


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


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


Last Updated: 4/5/2019, 10:21:49 AM