[DateCalendar] Allow to override the format of the header with a prop #10990
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
flaviendelangle
added
the
component: pickers
flaviendelangle
commented
Nov 10, 2023
| @@ -329,6 +332,32 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>( | |||
| timezone, | |||
| }); | |||
|
|
|||
| // When disabled, limit the view to the selected date | |||
| const minDateWithDisabled = (disabled && value[0]) || minDate; | |||
There was a problem hiding this comment.
The DateRangePicker calendar was not using the calendarHeader slot
| {utils.format(visibleMonths[month], 'monthAndYear')} | ||
| {utils.formatByString( | ||
| visibleMonths[month], | ||
| calendarHeaderProps.format ?? `${utils.formats.month} ${utils.formats.year}`, |
There was a problem hiding this comment.
When we have 2+ months visible, we don't use the header and instead we directly set the format.
Is it good for you to also use the slot prop here? That way people can always override the format the same way
.../x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
Show resolved
Hide resolved
flaviendelangle
commented
Nov 10, 2023
| @@ -103,28 +102,12 @@ describe('<DateCalendar />', () => { | |||
| expect(disabledDays.length).to.equal(31); | |||
| }); | |||
|
|
|||
| it('should render header label text according to monthAndYear format', () => { | |||
There was a problem hiding this comment.
This is the test for the old API, we now have a new one
|
Deploy preview: https://deploy-preview-10990--material-ui-x.netlify.app/ Updated pages: |
|
@k725 since you will need this feature, I'd be interested to have your feedback about the DX and the doc clarity 🙏 |
.../x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
Show resolved
Hide resolved
michelengelen
approved these changes
Nov 11, 2023
|
@flaviendelangle Thank you very much. It seems easy to use for me. LGTM |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of #10776
calendarHeaderslot support onDateRangeCalendarslotProps.calendarHeader.formatLocalizationProvideron tests (not related to this PR, I just saw them while working on it)I can mark this as breaking and add it to the migration guide if you want.