Polymer component based on the accessible Date Picker from Open Ajax Alliance

[ This description is mirrored from README.md at github.com/felixzapata/polymer-openajax-datepicker on 2019-05-22 ]

Published on webcomponents.org

<polymer-openajax-datepicker>

Polymer component based on the accessible Date Picker from Open Ajax Alliance.

  <label id="date_label" for="date">Date</label>:
  <input id="date" type="text" value="[[datepickerValue]]" />
  <paper-button onclick="datePicker.showDlg()">Select Date...</paper-button>
  <polymer-openajax-datepicker id="datePicker" date="{{datepickerValue}}"></polymer-openajax-datepicker>

Installation

Install the component using Bower:

$ bower install polymer-openajax-datepicker --save

Or download as ZIP.

bModal

Type: Boolean

Default: false

If datepicker should appear in a modal dialog box.

date

Type: String

The selected date, based on ISO 8601

locale

Type: String

Default: en

To localize the calendar using Moment.js

initDate

Type: String

Optional init date for the calendar, based on ISO 8601

minDate

Type: String

Optional min date for the calendar, based on ISO 8601

maxDate

Type: String

Optional max date for the calendar, based on ISO 8601

Keyboard support

  • Left: Move focus to the previous day. Will move to the last day of the previous month, if the current day is the first day of a month.
  • Right: Move focus to the next day. Will move to the first day of the following month, if the current day is the last day of a month.
  • Up: Move focus to the same day of the previous week. Will wrap to the appropriate day in the previous month.
  • Down: Move focus to the same day of the following week. Will wrap to the appropriate day in the following month.
  • PgUp: Move focus to the same date of the previous month. If that date does not exist, focus is placed on the last day of the month.
  • PgUp: Move focus to the same date of the following month. If that date does not exist, focus is placed on the last day of the month.
  • Ctrl+PgUp: Move focus to the same date of the previous year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Ctrl+PgDn: Move focus to the same date of the following year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Home: Move to the first day of the month.
  • End: Move to the last day of the month
  • Tab: Navigate between calander grid and previous/next selection buttons
  • Enter/Space: Select date

TODO

  • Add tests.
  • Add more custom CSS properties.
  • Set focus on the focus target.

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

History

1.0.0

  • Fixes #7
  • Fixes #11
  • New files structure

History

0.2.2

  • Fixes #8

0.2.1

  • Merge pull request #9 to resolve conflict after the install of Bower

0.2.0

  • Add support for i18n using Moment.js. It fixes #2, #3 and #4

0.1.2

  • Fixes Firefox issues
  • Fixes #1

0.1.1

  • Fixes how to show the calendar under Firefox

0.1.0

  • Initial realease

License

MIT License

Install

Link to this version
TestedReleased 29 June 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 0.2.2

Dependencies

Polymer/polymer#^2.0.0

  • abdonrd/moment-element#^2.0.0