[pickers][DateTimePicker] Using renderDigitalClockTimeView causes console errors

[KealJones]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-tlhhey-km5fcz?file=Demo.tsx
2. Observe error Failed prop type: Invalid prop `views[1]` of value `minutes` supplied to `ForwardRef(DigitalClock)`, expected one of ["hours"]

Adjusting the default props views to just be hours removes the minutes and meridian.

Current behavior

throws console error

Expected behavior

shouldnt throw console error.

Context

i am trying to use a DigitalClock for DateTimePicker instead of MultiSectionDigitalClock.

The only work around to not get an error i could find was:
(as default props in theme)

 viewRenderers: {
  hours: ({views, focusedView, ...rest}) => renderDigitalClockTimeView({...rest, views: ['hours'], focusedView: 'hours'}),
  minutes: null,
  seconds: null,
},

or (same but for in jsx prop)

viewRenderers={{
  hours: ({views, focusedView, ...rest}) => renderDigitalClockTimeView({...rest, views: ['hours'], focusedView: 'hours'}),
  minutes: null,
  seconds: null,
}}

link to workaround: https://stackblitz.com/edit/react-tlhhey?file=Demo.tsx

Your environment

npx @mui/envinfo

Need to install the following packages:
@mui/[email protected]
Ok to proceed? (y) y

  System:
    OS: macOS 14.7.1
  Binaries:
    Node: 20.11.0 - ~/.asdf/installs/nodejs/20.11.0/bin/node
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.14.2 - ~/.asdf/installs/nodejs/20.11.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.108
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/icons-material: ^5.15.15 => 5.15.15 
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.15 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system: ^5.15.15 => 5.15.15 
    @mui/types: ^7.2.14 => 7.2.14 
    @mui/utils: ^5.15.14 => 5.15.14 
    @mui/x-data-grid:  7.18.0 
    @mui/x-data-grid-premium: 7.18.0 => 7.18.0 
    @mui/x-data-grid-pro: 7.18.0 => 7.18.0 
    @mui/x-date-pickers: ^7.9.0 => 7.9.0 
    @mui/x-date-pickers-pro: ^7.9.0 => 7.9.0 
    @mui/x-internals:  7.18.0 
    @mui/x-license: ^7.0.0 => 7.2.0 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @types/react: ^17.0.80 => 17.0.80 
    react: ^17.0.0 => 17.0.2 
    react-dom: ^17.0.0 => 17.0.2 
    typescript: ^5.4.4 => 5.4.4 

Exit code: 0

Search keywords: renderDigitalClockTimeView, DigitalClock, DateTimePicker, viewRenderers, views, focusedView

[michelengelen]

Hey @KealJones ... you did pass the 'minutes' view in the views prop so it tries to look for that when rendering the views for the pickers.

You need to remove it from the views array to make it work:

<DateTimePicker
  label="Basic date time picker"
- views={['year', 'month', 'day', 'hours', 'minutes']}
+ views={['year', 'month', 'day', 'hours']}
  viewRenderers={{
    hours: ({ views, focusedView, ...rest }) =>
      renderDigitalClockTimeView({
        ...rest,
        views: ['hours'],
        focusedView: 'hours',
      }),
    minutes: null,
    seconds: null,
  }}
/>

[KealJones]

@michelengelen hey thanks for the reply. Your suggestion was actually what tried first but it makes the Field only show the hours.

Hence why my workaround was to wrap renderDigitalClockTimeView and override the views and focusedView props, so that the field can still show everything but the errors would go away, I'm not sure where the common usage of renderDigitalClockTimeView is but the error seems like it would happen in most usages, maybe?

Also, i realized just now that the link i put for the reproduction url was actually the workaround i had made, so here is a working reproduction, select the date/time with the dropdown picker to see the errors: https://stackblitz.com/edit/react-tlhhey-km5fcz?file=Demo.tsx

ill update the main issue link as well.

[michelengelen]

You can use the format to show the minutes as well:

format="DD/MM/YYYY hh:mm a"

[kealjones-wk]

@michelengelen Although that does work when combined with the views excluding minutes that unfortunately prevents date format localization via the LocalizationProvider from being applied. so it's a no go as we need date format localization to work.
Demo of format suggestion issue: https://stackblitz.com/edit/react-8gpzx1?file=Demo.tsx

[kealjones-wk]

My workaround works just fine, I mainly brought this up as an issue because I was just curious if maybe the workaround i suggested or something like it should actually be part of renderDigitalClockTimeView. I am not sure of any other use cases where it would expect or allow any other view.

thought of a small adjustment for the workaround: focusedView: focusedView != null ? 'hours' : null,. focusedView gets "minutes" after selection on the DigitalClock because i assume somewhere in DateTimePicker it is expecting to always have the MultiSectionDigitalClock and is trying to focus the next section.

[KealJones]

woops just realized i posted those with my work account, my bad those above are me.

[KealJones]

I just discovered that you can use thresholdToRenderTimeInASingleColumn={Number.MAX_SAFE_INTEGER} to get it to render a single column DigitalClock instead. This actually removes the need to have the viewRenderers at all and looks like it has special handling and stuff already built in. so Ill just use that thanks!

[michelengelen]

Ah, right ... if that works for you it's great. I'll close this issue then! 👍🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@KealJones How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.