Name Last Update
demo Loading commit data...
.gitignore Loading commit data...
.jshintrc Loading commit data...
LICENSE Loading commit data... Loading commit data...
bower.json Loading commit data...
index.html Loading commit data...
package.json Loading commit data...
paper-calendar.html Loading commit data...
paper-date-picker-dialog-style.html Loading commit data...
paper-date-picker.html Loading commit data...
paper-year-list.html Loading commit data...


Material Design date picker, compatible with Polymer 1.0

Provides a responsive date picker based on the material design spec. This component aims to be a clone of the date picker introduced in Android Lollipop.

wide picker screenshot narrow picker screenshot

See the component page for full documentation.


Default picker:


Setting the initial date to April 20, 2015:

<paper-date-picker date="April 20, 2015"></paper-date-picker>

You may also specify a minimum and/or maximum date allowed in this picker using the same date notation:

<paper-date-picker min-date="April 1, 2015" max-date="June 30, 2015"></paper-date-picker>

If you include this element as part of paper-dialog, use the class "paper-date-picker-dialog" on the dialog element in order to give it proper styling:

<paper-dialog id="dialog" class="paper-date-picker-dialog" modal
  <paper-date-picker id="picker" date="[[date]]"></paper-date-picker>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm>OK</paper-button>

Reporting Bugs

When filing a bug report, please provide an example of how to repoduce using plunker, jsbin, jsfiddle, etc. You can use the following plunker as a starting point:

If you find this component useful, please show your support by donating to Bold Idea. Click the button below!

ideaSpark campaign button