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
allowInput=false  
altFormat="Y-m-d"
altInput=true
altInputClass="my-alt-input"
clickOpens=true
dateFormat="M/D/Y"
defaultDate=defaultDate
disable=datesToDisable
enableSeconds=false
enableTime=true
flatpickrRef=flatpickrRef
hourIncrement=1
inline=false
maxDate=maxDate
minDate=minDate
minuteIncrement=5
nextArrow=">"
noCalendar=false
onChange=(action (mut dateValue))
onClose="doSomeStuffOnClose"
onOpen="doSomeStuffOnOpen"
parseDate=false
placeholder="Choose a Date"
prevArrow="<"
static=false
timeFormat="H:i"
time_24hr=false
utc=false
value=(readonly dateValue)
wrap=false}}

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

Note: You should pass your value with the readonly helper, and you should only update your value selected in the onChange action. If you just want it to be set to the new dateObject, you can use (action (mut dateValue)) like the example above.

Whenever a new date is selected, the action onChange will be fired, and passed the new dateObject and dateString to that action. This allows you to pass whatever action you may want in to happen on change.

Themes

flatpickr provides several themes out of the box. You can specify a theme in your ember-cli-build.js.

const app = new EmberApp(defaults, {
  flatpickr: {
    theme: 'material_blue'
  }
});  

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!