ember-power-datepicker

This addon it's the last member of the Ember Power Project family and itcombines ember-basic-dropdown and ember-power-calendarinto a single datepicker component that exposes the public APIs of both components as one.

As the components this one is born from, it aims to be flexible and customizable so you cantaylor your perfect datepicker. For that it extrictly follows DDAU approach and all itssubcomponents can be omitted or replaced by your own.

Disclaimer

This addon is in active development so expect some churn.A changelog file will be maintained to surface what changed and when and ease updates.

Small demo

Installation

• ember install ember-power-datepicker

Setup

If you are using sass, you can import the styles in your app.scss

@import "ember-power-datepicker";

This component doesn't has any style of itself, so the only thing this import is doing isin turn importing the styles of ember-basic-dropdown and ember-power-calendar, sothis is just a convenience.If you already use and import the styles of those addons yourself, you don't have toimport these.

Usage

The API of the component will remind you the APIs of its both parents. It leveragescontextual components and most of the options you can pass to the original componentsare accepted by this addon.

Let's see a basic example:

<PowerDatepicker @selected={{selected}} @onSelect={{action (mut selected) value="date"}} as |dp|>
  <dp.Trigger tabindex="-1">
    <input type="text" class="my-input-class" readonly value={{moment-format selected}}>
  </dp.Trigger>

  <dp.Content class="demo-datepicker-small">
    <dp.Nav />
    <dp.Days />
  </dp.Content>
</PowerDatepicker>

The {{dp.trigger}} and {{dp.content}} come from ember-basic-dropdown.You can learn more about them here: https://www.ember-basic-dropdown.com/docs/how-to-use-it

The {{dp.nav}} and dp.days components along with the selected and onSelect propertiescome from ember-power-calendar.You can learm more about them it here: http://www.ember-power-calendar.com/docs/action-handling

The selected and onSelect are the only mandatory options. You can omit them, but ifyou do and you don't allow users to select a date, what do you want a datepicker for?

Ember and Browser support

This addon is only tested back to Ember 2.8. It may or may not work in older versions.Javascript wise the addon should work back to IE10, but CSS wise the default styles useflexbox, so expect only IE11 support unless you roll out your own template using <table>,which you can.

Testing

This addon also provides a convenientdatepickerSelect('selector', dateOrMoment) test helper to interact with the component in tests.

Import this helpers in your tests like this:

import { datepickerSelect } from 'ember-power-datepicker/test-support';