Selecting dates sometimes results in the wrong date being picked

[peepmyfooty]

When you pick a date the UI selects the previous day. Is this a feature?

[bmonjoie]

This comment is. not. helpful.
Nobody forces you to use this or to try it nor have you paid for it, so you could be a bit more polite when asking for a fix.

Could you please give us an example of code that you use and that doesn't work as expected so we know exactly where to look ?
Also, could you tell us your system's locale (if not mentionned in the code example) ?

Thank you

[ilanbiala]

@bmonjoie way to keep it going.....that was really dumb. Instead of being mature and saying "we try to make this great, we're sorry it doesn't work. If you have any suggestions, feel free to open a PR.", you just continued it and made it worse...

[bmonjoie]

@ilanbiala, I understand your point of view even though I don't share it.
Yet, I won't comment any further on that here because I'd like this issue to stay on topic.

Please comment if you have more information about the issue reported.

[peepmyfooty]

You're right Xzan and I apologize. This was borne out of hours spent trying to find a component that could fill a need and nothing was working, (including several other date-pickers). I, and many, many others I'm sure, truly appreciate the work you've put in.

Ok, so from the demo page, all of the example paper-date-picker elements display the previous day.

This is from a US locale.

I attached a screenshot from clicking the 'Open US English Date Picker' button.

Please let me know of any other details I can provide - am more than happy to.

[bmonjoie]

@peepmyfooty, that's ok, don't worry, it's already forgotten ;)

From your screenshot, it also appears that everything is shifted by one (day but also month and year).
Thank you very much for reporting this problem, we will try to reproduce and fix this problem.
I will let you know as soon as we have something.

[blade1981m]

I am also noticing this problem. It seems to be off by one for month, day and year based on passing the date parameter of date="2015/1/20" it seems to have pre-selected December 19th 2014. In addition when I then pick a new date from the picker after reopening it I find it is off by just one day so if I pick January 15th 2015 after reopening the picker I see that January 14th 2015 is selected. I did not pass a locale parameter, but I am in US. Let me know if I can provide any further information to be of assistance.

[David-Mulder]

Looking into this right now, could someone who is encountering this problem run the following code snippets:

var date = new Date(2015,0,1);
date.getDay() // should return 4

and

var date = new Date(2015,0,0);
// should return Dec 31 2014

and

new Date(Date.UTC(2014, 11, 0));
// should return Nov 30 2014

and

var date = new Date(2015,0,1);
Intl.DateTimeFormat("en-US", {day: 'numeric' }).format(date); // should return "1"

I hope one of these snippets will show us what is the difference between the systems. So far I have tried everything I could think of in changing my system (from timezones to even the time itself 😝 ), but it keeps working for me 😟

[peepmyfooty]

The 3rd test:

new Date(Date.UTC(2014, 11, 0));
// should return Nov 30 2014

returns: Sat Nov 29 2014 18:00:00 GMT-0600 (CST) on my system.

The other tests return the expected results.

[David-Mulder]

@peepmyfooty In that case, could you please try the demo running on this page: https://polymerdev-greats-1.c9.io/bower_components/paper-date-picker/demo.html.

And I have to say now that I seriously do not comprehend the way the millisecond constructor of the Date object works... that code was written in the first place actually to prevent issues like this~ oh well...

[peepmyfooty]

Ok, so on this demo page all of the dates selected are the correct current date. When you select a different day on each of the calendars, the correct day is selected. That's great!

Now, when I open the dialogs by clicking the buttons I am noticing that the date reported on the left is not displayed in the calendar on the right side. If I scroll the calendar I find the day is in fact selected but it is not displayed initially when the dialog opens. I've attached a screenshot below:

[David-Mulder]

@peepmyfooty Secret confession: that was an issue I was aware of. I was hoping that this issue would be fixed before I would have to think up a hack to fix that issue, as a fix to that first issue would allow me to do the infinite scrolling in a neater way which should prevent this issue from occurring in the first place.

If you won't miss it too much turning off infinite scrolling is definitely an easy way that should prevent this issue from happening. (It's a race issue, so it's not a guarantee, but pretty sure none the less) The other way is to set an arbitrary higher number in the setTimeout in paper-date-picker.html:342 (it's 0 now). I am pretty sure a creative solution could be written which would retry every 100ms or so till it succeeds, but I don't have time now to put into that, might have it later and definitely open to pull requests (the code is pretty simple, the entire thing is now handled from line 325 to 342).

[David-Mulder]

Back regarding this issue, it seems it's solved, I have also commited it, but not yet tagged it (so it won't show up in bower). The reason is that there is a part in me that fears this fix is going to cause new issues, so want to confirm with a couple more people that it actually works for them 👼

[peepmyfooty]

Sounds good. I can definitely work with this. Thanks again for all the work put into this. The UI is beautiful and look forward to incorporating this into our application!

[blade1981m]

Sorry, this is the first time I have had chance to check. I got the same results as peep (3rd test showed Nov 29th). The demo site you posted also works ok for me. I saw that the demo.html, paper-date-picker.html and paper-date-picker-dialog.html were all updated in the repository about 4 hours ago. I downloaded the newer files, but am still seeing the same issue.

[David-Mulder]

@blade1981m That's... odd. Sorry for not having more time right now, will take another look tonight I hope and see what I missed 😟 . I checked by hand and the version in GitHub does seem to be the correct one... Just to double check, it's not an issue with caches or something? I have seen some weird caching issues with HTML imports in chrome, so that's the only reason I am asking (during dev I just disable the cache completely).

[blade1981m]

I did forget to make sure I had disabled the cache. I just tried it now with cache disabled and unfortunately I am still having the same issue.

[David-Mulder]

I have to say I am incredibly confused by this. Could you maybe dump as much information about your environment as possible? From browser version to system locale to timezones? I will try to reproduce the problem somehow~ because right now I am quite lost as to what else it could be.

[blade1981m]

Client:-
Browser: Google Chrome Version 39.0.2171.95 dev-m
OS: Windows 7 Enterprise - Service Pack 1
Region and Language Format: English (United States)
Time zone: (UTC-06:00) Central Time (US & Canada)
Server:-
OS: Windows Server 2008 R2 Standard - Service Pack 1
Region and Language Format: English (United States)
Time zone: (UTC-06:00) Central Time (US & Canada)

[adalinesimonian]

Experiencing the same problem; every single instance of the picker that I've tried off the demo page selects the previous day instead of the one I click.

I was totally bummed out because this component is one of the last things I needed to get an app running! 😞

So I decided to take a look at the markup with the inspection tool, and I saw this oddity:

So apparently January of this year begins on the 31st and ends on the 26th. 😜 Oddly enough I didn't even notice this when I first looked at the page; go figure! I must be blind.

I have no idea why in the world this is happening.

Windows 8.1 Professional Update 1
Chrome 40.0.2214.115 m (64-bit)
English (United States)
(UTC-08:00) Pacific Time (US & Canada)

[FranzThomsen1089]

Has anyone looked further into this?
I am experiencing the same issue and was hoping for a fix for it

[sheunaluko]

I recently came across this issue and resolved it by using code defined in re-com demo:
https://github.com/Day8/re-com/blob/master/src/re_demo/datepicker.cljs

They define a function in that file:
(defn- date->string
[date]
(if (instance? js/goog.date.Date date)
(unparse (formatter "dd MMM, yyyy") date)
""))

If you define this function in your app and then in the on-change callback you use it then the date should be the correct date rather than the previous
[re-com/datepicker
:model ...
:show-today? ...
:on-change (fn [d]
(js.console.log (date->string d))]

Hope that helps