search

praveenpuglia / vuetify-daterange-picker

The missing date range picker for Vuetify JS you have been looking for.
https://vuetify-daterange-picker.gitbook.io/docs
MIT License
197 stars 59 forks source link

Input field readout is not the same as the selected date #28

Closed onx2 closed 5 years ago

onx2 commented 5 years ago

For example, if I select september 6th - 11th in the date picker the input field reads 5th - 10th. This doesn't seem to be the case with the top readout inside of badges.

Is there a configuration that I am missing? This doesn't seem intuitive that the readout would be different than the dates selected.

image

praveenpuglia commented 5 years ago

That is weird. Can you post your options here?

onx2 commented 5 years ago

Thanks for the quick response! I'm viewing the sandbox editor: https://codesandbox.io/s/q9vzox5y6j

Before I implement into my project I want to make sure this can be changed to prevent confusion. It seems like this date mismatch is unintended behavior -- I know there are always questions surrounding inclusive vs exclusive date selections but I think that the readouts should be identical to the highlighted date. What are your thoughts on this?

Thanks again!

praveenpuglia commented 5 years ago

  1. The codesandbox link is too old. Can you try reproduce it in this demo? - http://vuetify-daterange.surge.sh. The code for that is in here

  2. Even in this codesandbox link I couldn't see wrong dates. May I know which browser you are using and any other details that you think might be relevant?

image

onx2 commented 5 years ago

Browser: Chrome Version 69.0.3497.92 (Official Build) (64-bit) OS: Windows 10 Home - Version 10.0.17134 Build 17134

Going to that page gives me the same results: image

Is there anything that I can do to help you reproduce / diagnose? I'm not sure how the mechanics of this component work but it seems to be happening in the most recent versions of Edge, Chrome, Firefox, and Opera.

Btw thanks for making this and for supporting it -- it is exactly what I am looking for. Cheers!

praveenpuglia commented 5 years ago

Thanks so much for using it and making me feel proud. I somehow think this is a timezone issue. Because I never seem to be able to reproduce it. Can you please tell me which TZ are you in? I can try replicating this by emulating may be?

onx2 commented 5 years ago

No problem, I'm very glad to have a robust solution for date range picking! I'm also excited for the colorizing feature on the way for dates between the range.

Timezone: UTC -5:00 Eastern Time (US & Canada)

The timezone being an issue makes a lot of sense. Perhaps the plugin you are using to handle dates is using GMT by default and not snagging the user's timezone?

praveenpuglia commented 5 years ago

Yeah! may be that's the issue. I'll look at it at the earliest. Going through a bit complicated phase right now. but I'll get back to it soon.

P.S - If you, however, wanna tackle this on your own, you are absolutely welcome to do so and send a PR meanwhile :) I would love that.

yuens1002 commented 5 years ago

i'm also in Timezone: UTC -5:00 Eastern Time (US & Canada) and have the same exact issue with the date range picker

StewM commented 5 years ago

It seems to be related to the format being used for the start date and end date. new Date('2018-10-01') returns Sun Sep 30 2018 19:00:00 GMT-0500 (Central Daylight Time), but new Date('2018/10/01') returns Mon Oct 01 2018 00:00:00 GMT-0500 (Central Daylight Time). Standardizing the format being passed into Date in the computed methods would probably fix this.

StewM commented 5 years ago

I've got a working solution, I'll submit a PR after work when I have a chance to write it up.

StewM commented 5 years ago

Submitted a PR: #36

praveenpuglia commented 5 years ago

closed in #36

praveenpuglia commented 5 years ago

Hello everyone, new releases are here and this has been fixed thanks to @StewM . Let me and him know if it all works for you :)

Also, if any of you are interested into feature development for this component, let me know. I can add you as a collaborator and we can work together to make this even cooler.