improved the date range selector and fixed #54 #60

[ghost]

this PR fixes #54 and #60
any remarks about the code or the comments let me know
I tested the functionality before this pr but if something isn't working open an issue or mention it here so I can fix it

[Rperry2174]

Hey @Abaali I like this solution a lot! There are a couple of UI/UX things that I think would make it better, however I'm not sure if they are all possible.

Improvement 1

We should change the date formate to be YYYY-mm-dd HH:MM

2021-19-01 04:30 PM --> 2021-01-19 04:30 PM
2021-10-02 04:55 PM --> 2021-02-10 04:55 PM

Improvement 2

This one is a little trickier, but I think if we use these date pickers that select a range we have to have it affect both dates.

Is it possible to make just one daterange selector affect both start date and end date? Right now its confusing because when you move the mouse around while selecting an end date, it seems like you are selecting a full range because a full range gets highlighted.

Here's a gif where I'm only adjusting the start date, but when I change the start date from the Jan 15 to Jan 1, it looks as if I'm changing the full range to be:
from: January 1, 2020 to January 15, 2020.

Do you think we could get ours to function more like this one?

[ghost]

@LouisInFlow I added some small changes

• changed the date format
• from selector doesn't look like you are changing the whole range anymore

the selector can be changed to look like the one you mentioned, but it will need a little work. So I suggest merging this PR to solve the current issues until we find a better way to implement it.
there is a good package that we can use but it will need some CSS customization here an example of how it looks:

if you or someone else can handle the CSS part, then I can change the package we are using now with this one.

[Rperry2174]

Hey @Abaali the thing stopping us from merging this version is that the UI/UX is actually more confusing than the version before. The reason why, is because in this version there are two colors, Grey and Blue... The problem is that these colors don't consistently mean something.

In the example I linked the meaning of the colors is very straightforward:

• If a date is "blue" then that date is part of the selected date range state. The color is a function of what date range is selected

In the version from this pr:

• If a date is "blue" then that actually doesn't necessarily mean anything. It actually flickers depending on wherever your mouse is hovering. It is therefore a function of where your mouse is hovering (which is more confusing than useful)
• if a date is "grey" then that means that it is part of the selected range UNLESS you move your mouse around and then even the selected range will sometimes turn blue depending on where your mouse is which then makes it hard to see which dates are part of the selected range

Here is what I propose in order to merge this PR:

• Make the current selected range be blue instead of the light grey that it currently is
• Remove the light grey color totally

So this:

• removes the "on hover" coloring so that the "flickering" stops
• Only colors a date as Blue when someone clicks and that date is a part of the date range

One more example:
Here the dates February 1 - February 11 should be blue instead of grey because those are the selected time range.

And here the dates February 12 - February 26 should just be normal white UNTIL the user clicks:

Then after the user clicks the range should look like this picture except the range February 1 through February 26 should be blue instead of grey:

Does that make sense?

[ghost]

I worked on a quick solution check it out

[Rperry2174]

Hey @Abaali yeah this is great! If you can resolve the conflicts then we can merge this

[ghost]

conflicts resolved! :)

[Rperry2174]

Thanks for this @Abaali Pyroscope's whole flow is much smoother thanks to your last couple PRs 🙌🏾

[ghost]

You're welcome 😄