app-datepicker (formerly jv-datepicker)

Update (v2.8.0)

• Happily to announce that app-datepicker is compatible with Polymer v1.6.0 which supports Native CSS Custom Properties 😽

• autoUpdateDate - proposed by #20 to allow datepicker to update date on date change if the datepicker is a standalone element.

• disableDates - proposed by #45 to support disabling dates defined by the user.

• Now Intl polyfill will not load (previously it does) if the browser does not natively support it and it is recommended for users to load the polyfill at the top-level document by some feature detections.

• As of v2.6.0 this element has been renamed to app-datepicker from jv-datepicker.

• locale (To change the locale of the datepicker, available language codes can be found in the demo.

See the component page for more information.

An custom Polymer element built from scratch to provide a datepicker based on Google's Material Design that is more compelling and rich with features.

Example:

<app-datepicker><app-datepicker>
<app-datepicker view="horizontal"></app-datepicker>
<app-datepicker theme="dark-theme"></app-datepicker>
<app-datepicker-dialog modal></app-datepicker-dialog>
<app-datepicker-dialog with-backdrop></app-datepicker-dialog>
<app-datepicker-dialog></app-datepicker-dialog>

app-datepicker provides a regular datepicker element. While app-datepicker-dialog has a app-datepicker being wrapped inside a dialog.

## ( Coming soon!) Generating your own boilerplate code of the compounds At the end of the demo, there is a section where user can play around with to generate your own boilerplate code with the attributes provided.

Styling

Now with mixins, head over to the component page for more details.

Getting Started

1. Install with bower. bower install --save app-datepicker

2. Load the web component and the dependencies.

For app-datepicker,

<link rel="import" href="path-to-bower-components/app-datepicker/app-datepicker.html">

For app-datepicker-dialog,

<link rel="import" href="path-to-bower-components/app-datepicker/app-datepicker-dialog.html">

3. Markup with <app-datepicker></app-datepicker> or <app-datepicker-dialog></app-datepicker-dialog>.

4. Done.

Browser Support

app-datepicker and app-datepicker-dialog:

|
IE/ Edge |
Firefox |
Chrome/ Opera |
Chrome for Android |
Safari |
iOS Safari | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE11, Edge | latest | latest | latest | unknown ? | unknown ?

[Intl.DateTimeFormat] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) (ECMAScript Internationalization API for locale) or for more details please visit Can I use... Intl?:

|
IE/ Edge |
Firefox |
Chrome/ Opera |
Chrome for Android |
Safari |
iOS Safari | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE11, Edge | latest | latest | latest | polyfilled with Intl.js | polyfilled with Intl.js

Throughput

License

MIT License © Rong Sen Ng