[DatePicker] Display week number #6144

alexfauquette · 2022-09-13T14:06:24Z

After agreeing on the main pipeline:

mui-bot · 2022-09-13T14:21:31Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-6144--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	628	1,018.9	628	793.26	182.988
Sort 100k rows	ms	610.3	1,159.8	705.2	858.36	190.458
Select 100k rows	ms	221.8	390.5	287.5	287.82	62.387
Deselect 100k rows	ms	145.1	275.3	195.9	204.34	43.427

Generated by 🚫 dangerJS against 672cc3b

flaviendelangle · 2022-09-13T15:20:43Z

Maybe @gerdadesign review would be interesting on this one

I feel like the week number is to close from the 1st column of days

alexfauquette · 2022-09-14T07:15:17Z

@flaviendelangle I agree. I just wanted to see before with you and @LukasTy if we agree on the DX.

For now, there is no way to get the week number from date-io. So I propose a two steps strategy:

We release a version with a callback and let to developer the responsibility of computing the week number.
We extend adapters to support week number

This should avoid breaking changes

flaviendelangle · 2022-09-14T08:31:03Z

If we were to add a method in the adapter and release it under a minor version, it would not be breaking right ?

alexfauquette · 2022-09-14T09:07:28Z

Yes. For developpers using getWeekNumber the only difference will be that they can remove this prop when we add the adapter method.

It's like introducing the customization callback before the default behavior 😅

github-actions · 2022-09-15T15:00:07Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-09-21T10:46:08Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2022-09-21T13:04:38Z

I do not understand those typescript errors

error TS2345: Argument of type 'MuiPickersAdapter<TDate>' is not assignable to parameter of type 'MuiPickersAdapter<TDate | null>'.

Yes MuiPickersAdapter<TDate> and MuiPickersAdapter<TDate | null> are incompatible, but I do not find where does this null comes from

flaviendelangle · 2022-09-21T13:12:40Z

CalculateRangeChangeOptions expects newDate: TDate
And you are passing rangePreviewDay which has the type TDate | null in DateRangePickerViewDesktop.
So TS consider that the TDate of CalculateRangeChangeOptions equals TDate | null in DateRangePickerViewDesktop.

Which causes your problem: the utils of type MuiPickersAdapter<TDate> in DateRangePickerViewDesktop is considered to equal MuiPickersAdapter<TDate | null> by CalculateRangeChangeOptions.

This kind of issue often comes from similar problem, the one prop TS uses to infer the generic is nullable when it should not.

alexfauquette · 2022-09-21T14:25:36Z

Thanks for the explanation. I fixed most of them. The remaining ones are about localization with TInputDate. I'm waiting for the PR removing this type to do the final clean-up

Sounds to be an interesting PR for detecting typing errors

joserodolfofreitas

I feel like the week number is to close from the 1st column of days

I agree. It can be solved in UserLand, but a bit more spacing by default can help visually group the more important information on the calendar.

Another customization I tried on the sandbox above was to change the calendarWeekText, but I couldn't get it working.

localeText={{ calendarWeekNumberText: "KW" }} Am I missing something?

p.s.: KW stands for Kalenderwoche, the used acronym in Germany.

flaviendelangle · 2022-11-17T13:25:55Z

@joserodolfofreitas this translation key is a callback.
It is the one used to render 45 / 46 etc... on your screen, so it needs to by dynamic.
For the header you are looking for calendarWeekNumberHeaderText

joserodolfofreitas · 2022-11-17T13:32:38Z

For the header you are looking for calendarWeekNumberHeaderText

Thanks! It'll probably be covered by any community translation, but should it work like this?

localeText={{ calendarWeekNumberHeaderText: "KW" }} to replace the "#" ?

https://codesandbox.io/s/custom-week-numbers-es327n?file=/demo.tsx

flaviendelangle · 2022-11-17T13:42:49Z

Oh indeed we have a big bug with the nested LocalizationProvider

The following work: https://codesandbox.io/s/custom-week-numbers-forked-2d033y?file=/demo.tsx
But if you put your locale on the LocalizationProvider, it gets lost

EDIT: Fixed by #6895

joserodolfofreitas · 2022-11-17T16:09:44Z

docs/data/date-pickers/date-picker/date-picker.md

 To shows all days of displayed weeks, included those outside of the current month, use `showDaysOutsideCurrentMonth`.

 By default, only weeks of the current month are displayed, but you can provide a total number of week to display with `fixedWeekNumber` prop.
 This value is usually set to `6` for Gregorian calendars, because months display can vary between 4 and 6 weeks.

 {{"demo": "CustomMonthLayout.js"}}

+### Add week number


Suggested change

### Add week number

### Display week number

joserodolfofreitas · 2022-11-17T16:12:20Z

docs/data/date-pickers/date-picker/date-picker.md

@@ -98,13 +98,22 @@ You can take advantage of the [PickersDay](/x/api/date-pickers/pickers-day/) com

 You can customize the month layout with some props.

+### Show additional days
+
 To shows all days of displayed weeks, included those outside of the current month, use `showDaysOutsideCurrentMonth`.


Perhaps we can review the props names to be more consistent between each other (in another PR).
For instance, would it make sense to rename this property to displayDaysOutsideCurrentMonth?

Why not. Can you create an issue for it?

joserodolfofreitas · 2022-11-17T16:16:49Z

docs/data/date-pickers/date-picker/date-picker.md

+### Add week number
+
+To display week number, use the `displayWeekNumber`.
+You can customize the string displayed, by using the localization key`localeText.calendarWeekNumberText`.


I'm unsure if there are use cases where users need to render something different for the week numbers, I'd think there's more chance that they want to update the header.

Suggested change

You can customize the string displayed, by using the localization key`localeText.calendarWeekNumberText`.

You can customize the calendar week header by using the localization key `localeText.calendarWeekNumberHeaderText`.

As well you can also customize what's rendered as a calendar week number, using a callback for the localization key `localeText.calendarWeekNumberText`

Should we also add an example for the callback usage?

Not super inspired by what could be a customized week number, so I simply added a point at the end of week numbers, and I override the header to set the default "#". It does not change any thing but it highlight the localization key.

github-actions · 2022-11-21T15:03:10Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle

Great work !
Sorry for the delay reviewing that one

flaviendelangle

Nice catch !

packages/x-date-pickers-pro/src/StaticNextDateRangePicker/StaticNextDateRangePicker.tsx

github-actions · 2022-11-22T09:29:46Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Eshakheni123 · 2023-01-26T12:07:40Z

why we can not click weekNumber.
I need functionality like this, if I click weekNumber then should be the render method.
something like this:
https://codesandbox.io/s/react-calendar-show-week-numbers-and-fixed-number-of-weeks-forked-hi4y1t?file=/src/index.js

alexfauquette · 2023-01-26T14:05:34Z

@Eshakheni123 Could you open an issue such that we can have a distinct discussion about your feature request

Would be nice in your issue to add some context, about what would be the use-case solved by being able to click on week-numbers: For which kind of application will it be used, and what would be the behavior when clicking on it?

Eshakheni123 · 2023-01-26T14:30:59Z

Thanks for your Response. I have created a new issue.

#7715

alexfauquette added 3 commits September 13, 2022 16:27

[DatePicker] Display week number

477f761

TS errors

1bb0273

scripts

cc90090

alexfauquette force-pushed the weekNumber branch from 9957445 to cc90090 Compare September 13, 2022 14:28

alexfauquette added 2 commits September 14, 2022 12:00

l10n

1752350

typing

d176048

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 15, 2022

alexfauquette added 6 commits September 21, 2022 11:52

Merge remote-tracking branch 'upstream/next' into weekNumber

9fe0d2d

Allows style customization

41c4338

add role

f77d13c

add test

0885e34

update dayjs

1007722

adapt doc

7fc1ef3

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Sep 21, 2022

Merge remote-tracking branch 'upstream/next' into weekNumber

7f16747

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 21, 2022

l10n

3ee11f1

alexfauquette added 2 commits September 21, 2022 16:22

type localisation helper

2382376

fix null conflicting with TDate

ca3276f

joserodolfofreitas reviewed Nov 17, 2022

View reviewed changes

alexfauquette added 3 commits November 18, 2022 09:38

Merge remote-tracking branch 'upstream/next' into weekNumber

c112dd8

Jose feedbacks

ecc1ca3

docs:typescripy

f216c17

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 21, 2022

flaviendelangle approved these changes Nov 21, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/next' into weekNumber

1702ddc

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 21, 2022

alexfauquette added 2 commits November 21, 2022 17:44

fix TS

38d991f

proptypes

f7dd3e5

flaviendelangle reviewed Nov 22, 2022

View reviewed changes

packages/x-date-pickers-pro/src/StaticNextDateRangePicker/StaticNextDateRangePicker.tsx Outdated Show resolved Hide resolved

feedback

757ccbc

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 22, 2022

Merge remote-tracking branch 'upstream/next' into weekNumber

15a3cb5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 22, 2022

alexfauquette added 2 commits November 22, 2022 14:03

eslint

531f233

TS

672cc3b

alexfauquette merged commit d5ba576 into mui:next Nov 22, 2022

alexfauquette deleted the weekNumber branch November 22, 2022 13:35

oliviertassinari added the new feature New feature or request label Nov 22, 2022

gerdadesign mentioned this pull request Nov 28, 2022

[pickers] Can't customize the height and the width of the views #4559

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DatePicker] Display week number #6144

[DatePicker] Display week number #6144

alexfauquette commented Sep 13, 2022 •

edited by oliviertassinari

mui-bot commented Sep 13, 2022 •

edited

flaviendelangle commented Sep 13, 2022

alexfauquette commented Sep 14, 2022

flaviendelangle commented Sep 14, 2022

alexfauquette commented Sep 14, 2022

github-actions bot commented Sep 15, 2022

github-actions bot commented Sep 21, 2022

alexfauquette commented Sep 21, 2022

flaviendelangle commented Sep 21, 2022 •

edited

alexfauquette commented Sep 21, 2022

joserodolfofreitas left a comment

flaviendelangle commented Nov 17, 2022

joserodolfofreitas commented Nov 17, 2022 •

edited

flaviendelangle commented Nov 17, 2022 •

edited

joserodolfofreitas Nov 17, 2022

joserodolfofreitas Nov 17, 2022

alexfauquette Nov 18, 2022

joserodolfofreitas Nov 17, 2022 •

edited

alexfauquette Nov 18, 2022

github-actions bot commented Nov 21, 2022

flaviendelangle left a comment

flaviendelangle left a comment

github-actions bot commented Nov 22, 2022

Eshakheni123 commented Jan 26, 2023

alexfauquette commented Jan 26, 2023

Eshakheni123 commented Jan 26, 2023

	You can customize the string displayed, by using the localization key`localeText.calendarWeekNumberText`.
	You can customize the calendar week header by using the localization key `localeText.calendarWeekNumberHeaderText`.
	As well you can also customize what's rendered as a calendar week number, using a callback for the localization key `localeText.calendarWeekNumberText`

[DatePicker] Display week number #6144

[DatePicker] Display week number #6144

Conversation

alexfauquette commented Sep 13, 2022 • edited by oliviertassinari

mui-bot commented Sep 13, 2022 • edited

flaviendelangle commented Sep 13, 2022

alexfauquette commented Sep 14, 2022

flaviendelangle commented Sep 14, 2022

alexfauquette commented Sep 14, 2022

github-actions bot commented Sep 15, 2022

github-actions bot commented Sep 21, 2022

alexfauquette commented Sep 21, 2022

flaviendelangle commented Sep 21, 2022 • edited

alexfauquette commented Sep 21, 2022

joserodolfofreitas left a comment

Choose a reason for hiding this comment

flaviendelangle commented Nov 17, 2022

joserodolfofreitas commented Nov 17, 2022 • edited

flaviendelangle commented Nov 17, 2022 • edited

joserodolfofreitas Nov 17, 2022

Choose a reason for hiding this comment

joserodolfofreitas Nov 17, 2022

Choose a reason for hiding this comment

alexfauquette Nov 18, 2022

Choose a reason for hiding this comment

joserodolfofreitas Nov 17, 2022 • edited

Choose a reason for hiding this comment

alexfauquette Nov 18, 2022

Choose a reason for hiding this comment

github-actions bot commented Nov 21, 2022

flaviendelangle left a comment

Choose a reason for hiding this comment

flaviendelangle left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 22, 2022

Eshakheni123 commented Jan 26, 2023

alexfauquette commented Jan 26, 2023

Eshakheni123 commented Jan 26, 2023

alexfauquette commented Sep 13, 2022 •

edited by oliviertassinari

mui-bot commented Sep 13, 2022 •

edited

flaviendelangle commented Sep 21, 2022 •

edited

joserodolfofreitas commented Nov 17, 2022 •

edited

flaviendelangle commented Nov 17, 2022 •

edited

joserodolfofreitas Nov 17, 2022 •

edited