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.

• Pleased to announce that app-datepicker is now compatible with both Polymer 1.x and Polymer 2.0 stable.
• 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.
• alwaysResetSelectedDateOnDialogClose - proposed by #74 to allow datepicker to reset the selected date to today's date once the datepicker closes and the demo has this included as well.
• As of v2.11, all dates will no longer include users' local system's timezone offset and all will be default to GMT/ UTC timezone. For more info, please see #89.

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.

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

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

2. Load the dependencies and the Intl polyfill if needed.

   Load Intl Polyfill for unsupported browsers via feature detection,

   if (window.Intl) {
     var intlPolyfill = document.createElement('script');
     intlPolyfill.src = 'path_to_intl_polyfill';
     document.head.appendChild(intlPolyfill);
   }

   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.

11	12+	latest	latest	latest

latest	latest	latest

latest	latest	latest	7+

latest	latest	latest	latest

latest	latest	latest	7+

ECMAScript Internationalization API for locale. For more details please visit Can I use... Intl?:

11	12+	latest	latest	latest	10+ **

** Intl Polyfill for unsupported browsers

MIT License © Rong Sen Ng