bendavis78 / paper-date-picker

Material design date picker component for polymer

paper-date-picker

NOTE: in bower, this package is polymer-paper-date-picker

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.

See the component page for full documentation.

Examples:

Default picker:

<paper-date-picker></paper-date-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
  on-iron-overlay-closed="dismissDialog">
  <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>
  </div>
</paper-dialog>

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: http://plnkr.co/edit/9c787GHiBzX7zI5x6gsX

Contributing

Pull requests are welcome and greatly appreciated. However, in order to speed up the review process, pull requests will not be merged if they include multiple unrelated changes (eg: "Fix for XYZ and other tweaks"). Also, don't include "opinionated" changes that aren't necessary for the feature or bugfix.

When submitting a PR for a bugfix, please reference the issue number in the commit message. For example: "Fixes issue #123".

---

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

paper-date-picker's Issues

Paper Date Picker closes on click inside dialog

After latest iron-overlay-behavior release, few hours ago (https://github.com/PolymerElements/iron-overlay-behavior/releases/tag/v1.1.2), paper date picker closes, when clicking inside the dialog.

screencast: http://screencast.com/t/FQBy2D1snt

Wondering if your component needs to be tuned, according the new release, or Polymer team introduced a bug.

Calendar populated thrice the first time

Try put the following in _populate function

console.log("currentYear: "+currentYear);
console.log("currentMonth: "+currentMonth);
console.log("---------");

reload, the console gives you

currentYear: 2015
currentMonth: 12
---------
currentYear: 2017
currentMonth: 12
---------
currentYear: 2017
currentMonth: 4
---------

Critical performance issue !

Plaese, update git tag for bower

Plaese, update git tag for bower.

"today" class lost on resize

The track is :

• ' on-iron-resize '
• ' _resizeHandler '
• ' _updateToday '
• ' today ' changed (twice by the way…)
• ' _getDayClass(item.date, today, date) ' recomputed
• (date.getTime() === this.today.getTime()) is never true
• ' today ' is never return

Anyway, _updateToday should be removed from the resize handler, no matter if people resize their window after midnight, we will avoid a hundred calls to _getDayClass per resize. If we want today to update, we have to set a timeout.
https://github.com/bendavis78/paper-date-picker/blob/master/paper-calendar.html#L621

year-picker responsive-interaction

https://www.google.com/design/spec/animation/responsive-interaction.html#

The years from the year-picker should implement paper-ripple and the selected year should be recentered in the year-picker's viewport before it being closed as it's possible to create a neon-animation to animate the scroll using a this._effect.onsample.

Rendering 3 months on ready.

I don't know how to fix but when I try to use it it shows 3 months , if I resize the windows then it shows only one.

before resizing window

after resizing

dynamic locale change impossible

One can't change locale of the calendar dynamically or compute it while creating datepicker even onCreate. If the locale is a computed parameter, the calendar opens always in english locale and the computed locale is applied only when a person selects a date and ONLY to the left/top part displaying the selected date but not to the weekdays/months in the calendar. Only if the person hardcodes the locale of the calendar, only then it's displayed corectly. Could you please make it availiable dynamically?

Component page is empty

Hi, looks like the readme is pointing to an empty page.
See http://bendavis78.github.io/paper-date-picker/

Issue since 1.1.0 (Cannot read property 'getTime' of nul) - Screencast Attached

I've some issues too: Uncaught TypeError: Cannot read property 'getTime' of null we did not have before. It causes some issues at the application. I will dig more to find why it happens.
Reading change logs, no of the changes should affect our app...let's see.

Just to show you. We did not have this error, that causes application stop working correctly in that point:

http://screencast.com/t/1w83Pjo0iyg

We rolled back to 1.0.3

demo isn't generated

For some reason, using polyserve, the demo isn't generated.

How to null a date

Hello,
sorry for this, maybe, obvious question, but I don't found a method to set null a date.
This is important because I've some non mandatory date fields in a form and the user must have some method to reset its value, if not null.
Also important to reset all date field after a "reset form" request.
I've tried to set date=null, date=undefined, date=''' but without success.
The same question also for your paper-time-picker element.
Can you help me?
Thanks
-g

Locale issue (it)

We have an issue, localizing for "it" language.
There's an issue on the weekdays labels:

http://screencast.com/t/smHOztUPj5U

They're shifted by one element.
Thanks

RTL

RTL used to be working and when I updated to 1.1.2 it is missy

After vulcanization Uncaught TypeError: Cannot read property '_week' of null

After vulcanization I retrieve the following error in console : Uncaught TypeError: Cannot read property '_week' of null.
That comes from the _localeChanged method :

Month picker

I want month-picker. Do you plan to it make?

It is like this.
http://demos.telerik.com/kendo-ui/datepicker/index

Thank you.

ajax request for local

I'm not sure if it's a good idea but the calendar could use the without-local version of momentjs and use iron-ajax to perform a request to a cdn when local change, and expose a boolean attribute 'allLocal' that use impotHref to get the locale file when true. If the the iron-ajax request fail, allLocal = true.

Not working in Safari/Firefox

Below errors are from Safari

[Warning] Invalid CSS property declaration at: @apply (index.html, line 21)
[Warning] Invalid CSS property declaration at: @apply (index.html, line 28)
[Error] TypeError: undefined is not an object (evaluating 'scope.$.picker')
(anonymous function)
[Warning] [dom-bind::_createEventHandler]: – "listener method showDialog not defined"

Update to latest material design spec

It seems the material design spec has changed the date and time pickers (yay). Aside from a change in the relative size of the header area, the new date picker also uses left/right swiping to switch months instead of scrolling. This should alleviate the performance issues from the scrolling calendar.

Any work on this should be done based off of the polymer1 branch. Pull requests are welcomed.

Remove implicit dialog style inclusion

The dialog style is currently included in the main html file for backward compatibility. This should be removed in the next version.

maxYear

I'm setting

<paper-date-picker minyear="1900" maxyear="2015" locale="pt" id="datepicker_data_inicio" class="x-scope paper-date-picker-0"></paper-date-picker> 

but the component do not respect the maxyerar

locale attribute does not appear to work

Even though my PCs locale is en-US, I am unfortunately seeing the time only in Chineese. I have tried changing the locale "en-US" during initialization but of no luck. I tried to play around the other attributes but with not much success.

This is a modified snippet from the demo code available on the site.

<paper-date-picker locale='en-US' maxYear='2017' date='2014-04-20' id="picker"></paper-date-picker>

Screenshot FYR.

Please help.

No license file

Hi,

I really like your date picker and would like to use it - can you please add a license file?
https://help.github.com/articles/open-source-licensing/#what-happens-if-i-dont-choose-a-license

Thanks & best regards,
Compu

select 2 dates

It would be a great improvement to add a range option to allow select 2 dates in the same date-picker like Airbnb does.

year-picker should use iron-list

That's it

css styling using "deep" depricated

Am getting this:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.

Just a heads up

Start month

Hi, excellent work, first of all. I just suggest that the initial month of the calendar should be the one of the initial date: starting always from January is mostly impractical

docs and convenience: strip hours, mins, etc. automatically

When setting the selected date via js it seems important to strip all hours, minutes, secs and millisecs.
This should be pointed out in the docs or even better be stripped automatically when setting the date.

[min|max]-date does nothing

Demo does not demonstrate min-date, max-date, minDate or maxDate working.

Very easy to recreate, just try to use any of the above attributes.

I'm currently under a time constraint so I wasn't able to debug as deep as I normally would have liked, so I apologize for the shallow analysis. My initial breakpoints indicated the values are always null.

Invalid date thrown when clicking on the month

Hello,
First, kudos for implementing the widget - it's really missing from polymer elements. I am looking into using this widget and have noticed few small issues so I thought I'd let you know.

I have noticed, when I try to tap on the name of the month inside core list selectedDateChanged function gets triggered but the date is invalid and this.value becomes NaN which then escalates to other components and results in errors and 'Inavalid Date' on the left hand side of the widget.
Looking at the structure I would expect scrollToMonth to fire first when I tap on say 'April 2015' but it's the selectedDateChanged that hits the breakpoint.

paper-calendar not displaying at all in IE 11

If you look at the demo in IE 11, you will see that the paper-calendar element does not display at all

When changing year, the display date is not updated

I have noticed selectedYearChanged does not set this.value and the selected date component does not update to reflect new values. You do set this in selectedDateChanged however so I am assuming that should also follow similar process. By the way, I have also noticed the day can sometimes change when selecting year.

Give the calendar an API for standalone use

As the calendar can be used standalone, it should
expose methods without underscore to manipulate the current month/year and select the date,
currentMonth/Year properties should be notifying and observing to change the current date according,
implement neonAnimatableBehavior for the animation to be configurable,
and have a solid event system.

Not compatible with Polymer 1.0

Could you update your elements to use <dom-module> instead of <polymer-element> ? Thanks

Upgrade to polymer 1.0

New 1.1.0 version not working

The new 1.1.0 version is not working for me, I get an Uncaught TypeError: Cannot read property 'apply' of undefined error at paper-date-picker.html:326 in Chrome.

create & implement paper-year-picker.html

The year picker should be a standalone element.

Date picker shouldn't set the time

The date-picker defaults the time always to midnight:
https://github.com/bendavis78/paper-date-picker/blob/master/paper-calendar.html#L583

This makes using the data-picker in combination with the time-picker (https://github.com/bendavis78/paper-time-picker) more complicated:
Scenario:

1. User selects date (via date-picker)
2. User selects time (via time-picker)
3. User figures out that the date was incorrect -> user corrects the date

In this case, the user looses also the time selection.

on-change or on-select event is needed

Scroll to month bug

The calendar does not automatically scroll down to the current month. I get this error: Cannot read property 'offsetTop' of null. I am using the Polymer 1.0 version

Uncaught TypeError: Cannot read property 'getMonth' of undefined

This happens upon start up if I vulcanize/crisper my app, otherwise it works fine. Version 1.1.2.
Edit:
It demo works but it does not work in my app, even without vulcanization.

month preload improvement

1. should use array mutation API to manipulate _months array.
2. _populate should reuse the previous months from _months array matching the requested months using shift, pop and splice on it instead of recreate the entire array. In this case, _months should be renamed to _preloadedMonths.
3. PRELOADED_MONTHS logic could be improved using :

• preloadedMonthsArround : number of preloaded months around the current, default to 1
• maxPreloadedMonths : _preloadedMonths length can't exceed maxPreloadedMonths, so _preloadedMonths is popped or shifted according to the current month's position in _preloadedMonths, default and can't be inferior to ( preloadedMonthsArround * 2 + 1 ).

Add GitHub project description

http://customelements.io/?q=paper-date-picker

Polylint finds various bound attributes that are not declared in 'properties'

See below output from Polylint (https://github.com/PolymerLabs/polylint).

# polylint
paper-date-picker.html:205:7
    Property 'selectedPage' bound to attribute 'class$' not found in 'properties' for element 'paper-date-picker'
paper-date-picker.html:213:7
    Property 'selectedPage' bound to attribute 'selected' not found in 'properties' for element 'paper-date-picker'
paper-date-picker.html:216:11
    Property 'minYear' bound to attribute 'min-year' not found in 'properties' for element 'paper-date-picker'
paper-date-picker.html:216:11
    Property 'maxYear' bound to attribute 'max-year' not found in 'properties' for element 'paper-date-picker'
paper-calendar.html:156:7
    Property '_contentClass' bound to attribute 'class$' not found in 'properties' for element 'paper-calendar'
paper-calendar.html:157:9
    Property '_months' bound to attribute 'items' not found in 'properties' for element 'paper-calendar'

vertical stacking with other controls in a dialog

All works well, except that i need to use it in a dialog with other controls, and i dont want vertical scrolling.
The data picker has its own scrolling, and the whole section should not also scroll.
Maybe i need to learn more polymer styling :)

<style include="shared-styles"></style>

<section>

<!-- Opens the dialog for testing-->
  <paper-button class="btn" on-tap="showdialog" raised>Change Date</paper-button>

  <paper-dialog id="dialog" modal class="paper-date-picker-dialog" >
    <h3>Age Verification</h3>
    <p>Please select your age</p>
    <paper-date-picker id="picker" responsive-width="655px"></paper-date-picker>
    <div class="buttons">
      <paper-button dialog-dismiss>Cancel</paper-button>
      <paper-button dialog-confirm autofocus>Confirm</paper-button>
    </div>
  </paper-dialog>
</section>

Add CSS mixins

Need to add mixins for custom styling.

moment^2.10

paper-date-picker is not compatible with moment 2.10.6

Changing the year in the year selector does not change the date

When selecting a new year using the year selector the headingDate variable is update while the date variable is not.

This way selecting a day and than a year leads to a different result than changing the year and then selecting the day.

Is this intended?

a11y improvements

• Add tabindexes and basic up/left/down/right keyboard navigation and selection.
• Add keyboard shortcut to switch months easily?

First day of week

A property for setting the first day of the week (in Europe it's Monday, not Sunday) would be handy.

style

I think style has changed a little?

https://www.polymer-project.org/1.0/docs/devguide/styling.html

<!-- import the module  -->
<link rel="import" href="../shared-styles/shared-styles.html">
<dom-module id="x-foo">
  <template>
    <!-- include the style module by name -->
    <style include="shared-styles"></style>

https://github.com/bendavis78/paper-date-picker/blob/master/paper-date-picker.html#L74-L76