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. I moved back to using bower, for ease of setup for now.

Demo

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

Installation

ember install ember-flatpickr

Usage

{{ember-flatpickr
altFormat="Y-m-d"
altInput=true
dateFormat="M/D/Y"
defaultDate=defaultDate
disable=datesToDisable
enableTime=true
flatpickrRef=flatpickrRef
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.

flatpickrRef

If you need to interact directly with the flatpickr instance you have created inside the component, you can pass in flatpickrRef=myFlatpickrRefName, which would then be accesible in the controller or parent component. You can then do things like this.get('myFlatpickrRefName').close() to close the datepicker, if you wanted to make a close button.

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!