ember-flatpickr

Ember-flatpickr

This is an Ember addon that wraps the date picker Flatpickr. I wanted to use npm instead of bower, so ember-browserify is also required to get this working.

Demo

http://shipshapecode.github.io/ember-flatpickr/

Installation

npm i -D flatpickr ember-browserify

ember install ember-flatpickr

Usage

{{ember-flatpickr
altFormat="Y-m-d"
altInput=true
dateFormat="M/D/Y"
defaultDate=defaultDate
disable=datesToDisable
enableTime=true
hourIncrement=1
inline=false
maxDate=maxDate
minDate=minDate
minuteIncrement=5
noCalendar=false
onChangeAction="doSomeStuffOnChange"
onCloseAction="doSomeStuffOnClose"
parseDate=false
placeholder="Choose a Date"
timeFormat="H:i"
time_24hr=false
value=(mut dateValue)}}

*(All options are displayed, but they have defaults and you only need to pass what you need)

Note: If you want the value to update when you select a date, and onChange fires, you have to use the mut helper.

Whenever a new date is selected, onChange will set the value to the newly selected date. It will also fire the action onChangeAction, and pass the new dateObject to that action.This allows you to pass whatever action you may want in to happen on change.

Observers

maxDate and minDate are watched by observers, and will update the flatpickr instance whenever you change them. This allows you to do things like having two components, used as a range picker, and updating the minDate and maxDate to display valid date choices on each.

Options

All options available to Flatpickr are available here.

Please see the flatpickr docs for a full list of options.

Contributing

If there are features you would like to see implemented, or we have missed some flatpickr options, please open an issue and/or submit a PR!