rachelmrgls / app-datepicker

A datepicker element built from scratch with Polymer

app-datepicker (formerly jv-datepicker)

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.

Update (v2.11.0)

• 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.

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 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.

Browser Support

app-datepicker and app-datepicker-dialog:

Microsoft Windows x64

11	12+	latest	latest	latest

Linux x64

latest	latest	latest

Mac OS X

latest	latest	latest	7+

Android 4.4.4 and above

latest	latest	latest	latest

iOS 7.1 and above

latest	latest	latest	7+

Intl.DateTimeFormat

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

Throughput

License

MIT License © Rong Sen Ng