Skip to content

[pickers] Improve hour and minute placement in DateTimePicker #19227

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 6 commits into from
Sep 8, 2025
Merged

[pickers] Improve hour and minute placement in DateTimePicker #19227

merged 6 commits into from
Sep 8, 2025

Conversation

MBilalShafi
Copy link
Member

@MBilalShafi MBilalShafi commented Aug 18, 2025 •
edited
Loading

@MBilalShafi MBilalShafi added scope: pickers Changes related to the date/time pickers. component: DateTimePicker The React component. design: ux Related to End-users' experience. labels Aug 18, 2025
@mui-bot
Copy link

mui-bot commented Aug 18, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-19227--material-ui-x.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 🔺+32B(+0.01%) 🔺+4B(+0.01%)
@mui/x-date-pickers-pro 🔺+32B(+0.01%) 🔺+7B(+0.01%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against f333ae6

@MBilalShafi MBilalShafi marked this pull request as ready for review August 21, 2025 09:22
@noraleonte
Copy link
Contributor

Thank you for looking into this! 🙏
I think we are on the right track to fixing it, but if we select the last 4 options we can end up with a weird empty space at the bottom of each column.
image
Would it be possible to make sure that the last option of each columns stick to the bottom? Similar to the behavior that we have at the top for the first 4-5 options.

https://github.com/user-attachments/assets/3eea521a-cd65-4e93-ae74-f62e048092b1
Something like:
image
I'm not sure I explained it right 🙈

@MBilalShafi
Copy link
Member Author

Thanks @noraleonte. This is a nice feedback, I updated the PR.
Here's a demo showing different states of the Date and Time Picker: https://codesandbox.io/p/sandbox/compassionate-wind-839n9c

@noraleonte noraleonte added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Sep 8, 2025
noraleonte
noraleonte approved these changes Sep 8, 2025
View reviewed changes
Copy link
Contributor

@noraleonte noraleonte left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this improvement @MBilalShafi 🙏 It's looking great!

@MBilalShafi MBilalShafi merged commit 507d518 into mui:master Sep 8, 2025
22 checks passed
JCQuintas pushed a commit to JCQuintas/mui-x that referenced this pull request Sep 15, 2025
@MBilalShafi @JCQuintas
[pickers] Improve hour and minute placement in DateTimePicker (mui#…
a7b8687 
…19227)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@noraleonte noraleonte noraleonte approved these changes

Assignees

No one assigned

Labels

component: DateTimePicker The React component. design: ux Related to End-users' experience. scope: pickers Changes related to the date/time pickers. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[pickers] Allow for hour and minutes selectors to not scroll to selected option

3 participants

@MBilalShafi @mui-bot @noraleonte