Implement week picker component #2768

TiesWestendorp · 2021-02-26T16:10:38Z

fixes #2033

Introduces the showWeekPicker setting, which allows picking a week. Internally, the date representing the week is the first day of that week. It's important that the dateFormat prop matches the locale in the sense that they have the same starting day of the week. In the same vein, the selected prop should refer to a date that's at the beginning of a week.

Question 1: should left and right arrows navigate the months, rather than weeks? Answer: no.
Question 2: should the week component be considered selected/keyboard-selected, and the styling be derived from that, or should the days be considered selected/keyboard-selected like they currently are?

…ek-picker

TiesWestendorp · 2021-03-01T15:22:35Z

@martijnrusschen or someone else, can you take a look at this PR, and give your take on the questions I posed above?

…ker into week-picker

tlehtimaki · 2021-03-03T13:39:49Z

Q2: I think the selecting of all dates in the week seems logical, but then I think you should not be able to individually select the dates.
Q1: For how its implemented now the up/down arrows are logical for browsing the week. The browsing of month suddenly with left/right arrow might be confusing for the user, if user is used to browsing days with those keys.

TiesWestendorp · 2021-03-03T14:53:27Z

Q2: I think the selecting of all dates in the week seems logical, but then I think you should not be able to individually select the dates.

My question was actually more geared towards the internal state; each day component has a 'selected' and 'keyboard-selected' state, which I reuse for the week picker here. Another way would be to not consider these days selected or keyboard-selected in this case, but the week component that wraps these days. There's a bit of a trade-off here: the former option borrows heavily from the existing styling, meaning it doesn't introduce much complexity in the stylesheets, but is potentially less flexible. As to your comment: clicking on a particular date will currently select the corresponding date - do you mean to say that you don't agree with this? My issue with that is that when the week numbers are not present you won't have a meaningful thing to click on. A takeaway from this may be that the week numbers should always be shown when the week picker is used, but that is also currently not the case.

Q1: For how its implemented now the up/down arrows are logical for browsing the week. The browsing of month suddenly with left/right arrow might be confusing for the user, if user is used to browsing days with those keys.

I agree, but wanted to lay the options on the table. 👍 Currently left/right behave the same as up/down in the week picker.

tlehtimaki · 2021-03-03T15:15:32Z

I understood that the concept would be to select just weeks, so I thought there would be no need to select a single date, but here that single date would convert in to the week that the date belongs to.

TiesWestendorp · 2021-03-03T15:57:26Z

I understood that the concept would be to select just weeks, so I thought there would be no need to select a single date, but here that single date would convert in to the week that the date belongs to.

Correct, just having the week number select the first date of a week was already possible by using a callback on the week number. What this PR introduces is the additional logic required to properly display the state, changed keyboard navigation to match and a fallback that ensures the first day of a week is always used.

TiesWestendorp · 2021-03-10T15:34:14Z

Could some one take a look at why the specs are failing? I'm not really sure what's going wrong.

martijnrusschen · 2021-03-10T15:35:23Z

Can you try to pull the latest master in? I think the issue was fixed earlier.

…

On Wed, 10 Mar 2021 at 16:34 TiesWestendorp ***@***.***> wrote: Could some one take a look at why the specs are failing? I'm not really sure what's going wrong. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2768 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKY2KGRGC53MJQRT7XBZOTTC6GQVANCNFSM4YIWJW4Q> .

TiesWestendorp · 2021-05-04T09:23:16Z

@martijnrusschen Could you still have a look at this PR?

martijnrusschen · 2021-05-05T14:29:10Z

This looks good! Can you resolve the merge conflict so I can merge it in? I'm prepping a major release for this week and would love to get this in.

TiesWestendorp · 2021-05-06T07:32:26Z

👍 Done.

martijnrusschen · 2021-05-06T07:41:15Z

I ran the tests, and it looks like there's some things breaking. Can you take a look?

TiesWestendorp · 2021-05-06T10:42:12Z

Should be fixed now.

martijnrusschen · 2021-05-06T12:43:27Z

src/week_number.jsx

        className={classnames(weekNumberClasses)}
-        aria-label={`${ariaLabelPrefix} ${this.props.weekNumber}`}


Is there a reason this is removed completely?

martijnrusschen · 2021-05-06T13:15:31Z

test/week_picker_test.js

@@ -0,0 +1,53 @@
+import React from "react";


Thinking a bit on code coverage.. Might be good to add some tests that checks the behavior of showing/hiding the weekpicker as well. Making sure the weekpicker isn't shown when the prop isn't passed in and shown when it is passed in.

Codecov added some comments on coverage as well, would be great to improve the coverage to make sure we don't break this in the future.

martijnrusschen

Let's improve the test coverage to make sure we won't break this in the future.

georgecosmin98 · 2021-05-27T15:03:56Z

Hello!

Any news about week-picker? When can we expect a release?

johnnyxbell · 2021-06-24T00:23:50Z

Any news on when we can get this merged?

Sozh-Max · 2021-06-26T11:23:35Z

Why is it taking so long?

manzoorwanijk · 2021-07-08T11:13:19Z

Any update on this?

nacimgoura · 2021-07-19T09:34:56Z

When will this feature be merged?

arikm66 · 2021-07-19T15:36:18Z

I really need this feature :) When will it be merged?

martijnrusschen · 2021-07-20T20:31:48Z

Perhaps someone can take a look and bring this to the finish line.

Seaviello · 2021-08-11T10:54:55Z

We are also currently interested in that feature. Is there something that outsider can do to help you out with making this happen or right now it's mostly in the reviewers' hands?

agathepey · 2021-08-27T13:35:10Z

Hey 👋 ! Any news about the merge? We really need this feature too :) Thank you in advance 🙏

akashraj9828 · 2021-10-04T06:39:22Z

Any update on this... really need this feature. Thanks in advance.

akashraj9828 · 2021-10-05T07:51:45Z

Not sure if anyone needs this anymore but I was able to implement the week picker with the existing library...
Demo:
https://codesandbox.io/s/react-datepicker-example-forked-89fn7?file=/src/WeekPicker.tsx

correahi · 2021-10-07T18:55:43Z

Hey guys, just in case anyone still needs a week picker, I came up with a solution that worked pretty well for my needs.

I used the dayClassName prop to attach the "react-datepicker__day--selected" className to every day in the week that's selected using date-fns

Then I use a little bit of CSS to highlight the whole week on hover

Which gives me this result, visually

From there, I just put this on my onChange handler so I can access the first and last day of the week, which is what I needed. You could also use other date-fns functions to get an array of all the days or the number of the week.

Keyboard navigation also works, since all you're doing is selecting a single day, everything else is just CSS trickery.

ngajhede · 2022-02-10T23:09:14Z

Hey @correahi! Thanks for this. I was wondering how you display the startDate to endDate in the input box?

correahi · 2022-02-12T05:01:38Z

Hey @correahi! Thanks for this. I was wondering how you display the startDate to endDate in the input box?

I don't have access to that codebase anymore but I'm pretty sure it's just a span with some text inside, something like ${startOfISOWeek(selectedDate)} to ${endOfISOWeek(selectedDate)} and onClick it opens the datepicker, it's not the default input.

stale · 2022-06-12T15:03:08Z

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

gtaylor44 · 2023-06-21T03:28:52Z

Will this be merged into master?

TiesWestendorp added 14 commits February 26, 2021 13:57

Add weekPicker attribute

219dedc

Add weekPicker example

a343987

Update documentation

471c679

Propagate showWeekPicker prop and change navigation when using the we…

9f85595

…ek-picker

Implement week picker functionality

c523da3

Update example

1c5a29e

Get start of week in handleChange as fallback when parse fails

913d759

Fix hover styling

0caf063

Resolve some tab and focus issue

9863c41

Update example

6feb6fd

Fix keyboard navigation when week numbers are shown

76de917

Fix focus issue

4fd2052

Update type information

41c1919

Semicolons for everyone

a660f2f

TiesWestendorp added 6 commits March 1, 2021 16:40

Add type information

0a14454

Undo unintended change

d1144d1

Add type annotations

6efa950

Fix type annotations and remove print statement

bf851f3

Fix type annotations and remove print statement

3345b76

Merge branch 'week-picker' of github.com:TiesWestendorp/react-datepic…

df0a599

…ker into week-picker

TiesWestendorp added 3 commits March 10, 2021 16:51

Add weekPicker attribute

b82ed11

Add weekPicker example

7be6744

Update documentation

13959d7

TiesWestendorp requested a review from martijnrusschen April 22, 2021 12:55

Merge branch 'master' into week-picker

df45ae5

Fix lint errors

742da69

martijnrusschen reviewed May 6, 2021

View reviewed changes

martijnrusschen requested changes May 8, 2021

View reviewed changes

correahi mentioned this pull request Oct 7, 2021

Can we have a week picker ? #2033

Closed

stale bot added the wontfix label Jun 12, 2022

stale bot closed this Jul 10, 2022

philipkocanda mentioned this pull request Oct 4, 2023

Week picker (2nd attempt) #4288

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement week picker component #2768

Implement week picker component #2768

TiesWestendorp commented Feb 26, 2021 •

edited

Loading

TiesWestendorp commented Mar 1, 2021

tlehtimaki commented Mar 3, 2021

TiesWestendorp commented Mar 3, 2021

tlehtimaki commented Mar 3, 2021

TiesWestendorp commented Mar 3, 2021

TiesWestendorp commented Mar 10, 2021

martijnrusschen commented Mar 10, 2021 via email

TiesWestendorp commented May 4, 2021

martijnrusschen commented May 5, 2021 •

edited

Loading

TiesWestendorp commented May 6, 2021

martijnrusschen commented May 6, 2021

TiesWestendorp commented May 6, 2021

martijnrusschen May 6, 2021

martijnrusschen May 6, 2021

martijnrusschen May 6, 2021

martijnrusschen left a comment

georgecosmin98 commented May 27, 2021

johnnyxbell commented Jun 24, 2021

Sozh-Max commented Jun 26, 2021

manzoorwanijk commented Jul 8, 2021

nacimgoura commented Jul 19, 2021

arikm66 commented Jul 19, 2021

martijnrusschen commented Jul 20, 2021

Seaviello commented Aug 11, 2021 •

edited

Loading

agathepey commented Aug 27, 2021

akashraj9828 commented Oct 4, 2021

akashraj9828 commented Oct 5, 2021

correahi commented Oct 7, 2021

ngajhede commented Feb 10, 2022

correahi commented Feb 12, 2022 •

edited

Loading

stale bot commented Jun 12, 2022

gtaylor44 commented Jun 21, 2023

		className={classnames(weekNumberClasses)}
		aria-label={`${ariaLabelPrefix} ${this.props.weekNumber}`}

Implement week picker component #2768

Implement week picker component #2768

Conversation

TiesWestendorp commented Feb 26, 2021 • edited Loading

TiesWestendorp commented Mar 1, 2021

tlehtimaki commented Mar 3, 2021

TiesWestendorp commented Mar 3, 2021

tlehtimaki commented Mar 3, 2021

TiesWestendorp commented Mar 3, 2021

TiesWestendorp commented Mar 10, 2021

martijnrusschen commented Mar 10, 2021 via email

TiesWestendorp commented May 4, 2021

martijnrusschen commented May 5, 2021 • edited Loading

TiesWestendorp commented May 6, 2021

martijnrusschen commented May 6, 2021

TiesWestendorp commented May 6, 2021

martijnrusschen May 6, 2021

Choose a reason for hiding this comment

martijnrusschen May 6, 2021

Choose a reason for hiding this comment

martijnrusschen May 6, 2021

Choose a reason for hiding this comment

martijnrusschen left a comment

Choose a reason for hiding this comment

georgecosmin98 commented May 27, 2021

johnnyxbell commented Jun 24, 2021

Sozh-Max commented Jun 26, 2021

manzoorwanijk commented Jul 8, 2021

nacimgoura commented Jul 19, 2021

arikm66 commented Jul 19, 2021

martijnrusschen commented Jul 20, 2021

Seaviello commented Aug 11, 2021 • edited Loading

agathepey commented Aug 27, 2021

akashraj9828 commented Oct 4, 2021

akashraj9828 commented Oct 5, 2021

correahi commented Oct 7, 2021

ngajhede commented Feb 10, 2022

correahi commented Feb 12, 2022 • edited Loading

stale bot commented Jun 12, 2022

gtaylor44 commented Jun 21, 2023

TiesWestendorp commented Feb 26, 2021 •

edited

Loading

martijnrusschen commented May 5, 2021 •

edited

Loading

Seaviello commented Aug 11, 2021 •

edited

Loading

correahi commented Feb 12, 2022 •

edited

Loading