-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[pickers] Add calendarHeader
slot
#7784
Conversation
b8491f9
to
f6e8ac0
Compare
Netlify deploy previewNetlify deploy preview: https://deploy-preview-7784--material-ui-x.netlify.app/ Updated pagesNo updates. These are the results for the performance tests:
|
@@ -64,7 +65,7 @@ export interface PickersCalendarHeaderSlotsComponentsProps<TDate> | |||
|
|||
export interface PickersCalendarHeaderProps<TDate> | |||
extends ExportedPickersArrowSwitcherProps, | |||
DateComponentValidationProps<TDate> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The component had shouldDisableXXX
props but never received them and never used them.
The new typing is closer from what is actually used.
f6e8ac0
to
0cef5a6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It overall looks good. I'm wondering if we should provide helpers to recreate the default header, by providing a <HeaderLabel/>
and a <HeaderMonthSwich/>
Such that if devs want to add something in the middle they can do it without having to care about stuff like: the labelId
should be passed to the date text, I need to add some transition on buttons, ...
packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx
Outdated
Show resolved
Hide resolved
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Would be good to also give the users a dropdown for the months and for the years, so we can have users that create a layout with one dropdown for each type. |
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be a great improvement! 👏
Do you think it would be worth adding a section in the https://mui.com/x/react-date-pickers/custom-components/ page? 🤔
packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
Outdated
Show resolved
Hide resolved
packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
Outdated
Show resolved
Hide resolved
CalendarHeader
slot
|
@dChin84 we can't guarantee a release date yet, hopefully next week |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMHO, it wouldn't hurt having example(s) on custom-componets page, but thats purely optional.
Great work! 👍 💯
I'll do a follow up with a doc example 👍 |
CalendarHeader
slotcalendarHeader
slot
Hi! Is there a way to add a custom header for the digital clock section as well? A few users have mentioned they're having trouble distinguishing between the hour and minute columns... Essentially, we want to add a label above the hours, minutes, and seconds columns. |
Closes #6653
Closes #9783
Live example