A datepicker element built from scratch with Polymer
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github 🐛 Fixed #98 Aug 1, 2017
animations
demo 🐛 Fixed locale bug on Firefox on macOS (#83) May 21, 2017
test 🐛 Fixed broken layout, fixed #93 and fixed #99 Oct 7, 2017
.editorconfig
.gitattributes 🍱 Minor update Apr 27, 2017
.gitignore
.travis.yml [DO-NOT-MERGE-JUST-YET] Ported to Polymer 2.x as hybrid element (#82) May 20, 2017
.yo-rc.json
LICENSE 🍱 Minor update Apr 27, 2017
README.md Added 5 star rating badge (#121) Apr 12, 2018
app-datepicker-animations.html 💔👫 Update README.md to announce the compatibility with Jun 30, 2016
app-datepicker-dialog.html
app-datepicker-icons.html 😈🆚👽 2.7.0, updated README, added new property autoUpdateDate for stan… Jun 23, 2016
app-datepicker.html
bower.json 🔖 2.12.0 Mar 4, 2018
clean-directories.sh 🔧 Minor update May 21, 2017
code-of-conduct.md
index.html [DO-NOT-MERGE-JUST-YET] Ported to Polymer 2.x as hybrid element (#82) May 20, 2017
intl.html
paper-dialog-theme.html redesign & refactoring in progress Oct 29, 2015

README.md

GitHub version Bower version Build Status
Published on Vaadin Directory Stars on vaadin.com/directory

app-datepicker (formerly jv-datepicker)

img-app-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

Internet Explorer Microsoft Edge Mozilla Firefox Mozilla Firefox Developer Edition Google Chrome Google Chrome Canary Opera Opera Developer Edition
11 12+ latest latest latest

Linux x64

Mozilla Firefox Mozilla Firefox Developer Edition Google Chrome Google Chrome Canary Opera Opera Developer Edition
latest latest latest

Mac OS X

Mozilla Firefox Mozilla Firefox Developer Edition Google Chrome Google Chrome Canary Opera Opera Developer Edition Safari Safari Technology Preview
latest latest latest 7+

Android 4.4.4 and above

Mozilla Firefox Google Chrome Google Chrome Dev Opera Android WebView
latest latest latest latest

iOS 7.1 and above

Mozilla Firefox Google Chrome Opera Safari for iOS
latest latest latest 7+

Intl.DateTimeFormat

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

Internet Explorer Microsoft Edge Mozilla Firefox Mozilla Firefox Developer Edition Google Chrome Google Chrome Canary Opera Opera Developer Edition Safari Safari Technology Preview
11 12+ latest latest latest 10+ **

** Intl Polyfill for unsupported browsers

Throughput

Throughput Graph

License

MIT License © Rong Sen Ng