ember-cli-tethered-calendar v0.0.4

ember-cli-tethered-calendar

This ember-cli addon provides a date-picker that is tethered to a target element. The date-picker also provides for switching between day and month selection modes with a single click!

Installation

• ember install ember-cli-tethered-calendar

Usage

Default use

{{date-picker value=value}}

This will render a text input which has a calendar tethered to it with the default configuration i.e. target bottom center and calendar top center.

Advanced usage

{{#date-picker
  value=value
  targetToAttach='#date-picker'
  targetAttachmentPosition='top right'
  calendarAttachmentPosition='top left'
  }}
  <button type="button" id="date-picker">Open Calendar</button>
{{/date-picker}}

This will render a button which will be the target for the calendar to tether to with custom tether configuration i.e. target top right and top left.

Additional options that can be passed to the date-picker include minDate and maxDate which allow for restricting selection of dates that come after or before minDate and maxDate respectively.

Note: Tether configuration is based on ember-tether style target specification.

Selection modes

The date-picker by default will render in the day selection mode. To switch to month selection mode(allows for changing year and month), click on the month label when in day selection mode. Clicking on a particular month will set the date picker to that month while also switching back to day selection mode.

Styles

If you are using Sass, all you need to do is import the addon styles with: @import "ember-cli-tethered-calendar";.

Development

Running the dummy app

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

This addon uses ember-try to test against multiple versions of Ember:

• ember try:each
• ember try:one ember-release --- ember test --serve

For more information on using ember-cli, visit https://ember-cli.com/.

Credits

• ember-power-calendar, the addon that allows for creating a custom calendar UI
• ember-tether, the addon that allows for tethering a block to an target somewhere else on the page