Material UI TimePicker not auto-selecting initial value when using renderDigitalClockTimeView

The DigitalClock handles selection of a single time instance in one step, just like a select component.The MultiSectionDigitalClock lets users select time using separate sections for separate views.

If your initial value has non-zero seconds or milliseconds, it won’t exactly match any list item, so it won’t be highlighted.

MultiSectionDigitalClockTimeView, on the other hand, compares each section (hour/minute/second) independently, so it appears to “auto-select” correctly.

Make sure your initial value is aligned with the clock’s step and has zero seconds and milliseconds:

import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
export const DigitalClockTimePicker = () => {
  const [value, setValue] = useState(
    dayjs().set("minutes", 0).set("second", 0).set("millisecond", 0)
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={["TimePicker"]}>
        <TimePicker
          sx={{
            width: "100px",
          }}
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
          label="Digital clock time picker"
          viewRenderers={{
            hours: renderDigitalClockTimeView,
            minutes: renderDigitalClockTimeView,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
};