See the component page for more information.

Update (v3.0.0) - Breaking changes

• Upgraded to Polymer 3 stable.

• Moved to NPM.

• Recommended to include the Intl polyfill and web-animations-js polyfill at the top document level.

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

   $ npm i app-datepicker

2. (Optional) Load the dependencies and the Intl and web-animations-js polyfills on unsupported browsers:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations-next.min.js"></script>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale"></script>

3. Load element in HTML or JS.

   <!-- In HTML, load with script[type=module], either `app-datepicker` -->
   <script type="module" href="/node_modules/app-datepicker/app-datepicker.js"></script>
   
   <!-- or, `app-datepicker-dialog` -->
   <!-- <script type="module" src="/node_modules/app-datepicker/app-datepicker-dialog.js"></script> -->

   // Alternatively, loading element in JavaScript.
   ...
   import 'app-datepicker/app-datepicker.js';
   ...

Browser Support

app-datepicker and app-datepicker-dialog:

Same as that of Polymer 3.

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