[DateTimePicker] Add Single Column Time Picker to DateTimePicker (dateTimeViewRenderers)

[SlowBurner]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Our use case is for a DateTimePicker with a TimePicker that has single column.

The MultiSectionDigitalClock was recently adding to the DateTimePicker via packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx
#8946

However,
I think a function should be added to dateTimeViewRenderers.tsx for rendering a single column time with the DigitalClock.

See example code below.

Examples 🌈

This example code, where I created new renderDesktopDateDigitalTimeView function works pretty well.
codesandbox example

// dateTimeViewRenderers.tsx
import * as React from "react";
import Divider from "@mui/material/Divider";
import { resolveComponentProps } from "@mui/base/utils";
import {
  DateCalendar,
  DateCalendarProps
} from "@mui/x-date-pickers/DateCalendar";
import { DateOrTimeViewWithMeridiem } from "@mui/x-date-pickers/internals/models";
import {
  DigitalClock,
  DigitalClockProps
} from "@mui/x-date-pickers/DigitalClock";
import { isInternalTimeView } from "@mui/x-date-pickers/internals/utils/time-utils";
import { isDatePickerView } from "@mui/x-date-pickers/internals/utils/date-utils";
import type { DateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker/DateTimePicker.types";
import { VIEW_HEIGHT } from "@mui/x-date-pickers/internals/constants/dimensions";
import { styled } from "@mui/material/styles";

export const DateTimeViewWrapper = styled("div")({
  display: "flex",
  margin: "0 auto"
});

export interface DateTimeViewRendererProps<TDate>
  extends Omit<
      DateCalendarProps<TDate> & DigitalClockProps<TDate>,
      | "views"
      | "openTo"
      | "view"
      | "onViewChange"
      | "focusedView"
      | "components"
      | "componentsProps"
      | "slots"
      | "slotProps"
    >,
    Pick<
      DateTimePickerProps<TDate>,
      "components" | "componentsProps" | "slots" | "slotProps"
    > {
  view: DateOrTimeViewWithMeridiem;
  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
  views: readonly DateOrTimeViewWithMeridiem[];
  focusedView: DateOrTimeViewWithMeridiem | null;
  timeViewsCount: number;
}

export const renderDesktopDateDigitalTimeView = <TDate extends unknown>({
  view,
  onViewChange,
  views,
  focusedView,
  onFocusedViewChange,
  value,
  defaultValue,
  onChange,
  className,
  classes,
  disableFuture,
  disablePast,
  minDate,
  minTime,
  maxDate,
  maxTime,
  shouldDisableDate,
  shouldDisableMonth,
  shouldDisableYear,
  shouldDisableTime,
  shouldDisableClock,
  reduceAnimations,
  minutesStep,
  ampm,
  onMonthChange,
  monthsPerRow,
  onYearChange,
  yearsPerRow,
  defaultCalendarMonth,
  components,
  componentsProps,
  slots,
  slotProps,
  loading,
  renderLoading,
  disableHighlightToday,
  readOnly,
  disabled,
  showDaysOutsideCurrentMonth,
  dayOfWeekFormatter,
  sx,
  autoFocus,
  fixedWeekNumber,
  displayWeekNumber,
  disableIgnoringDatePartForTimeValidation,
  timeSteps,
  skipDisabled,
  timeViewsCount
}: DateTimeViewRendererProps<TDate>) => {
  const isActionBarVisible = !!resolveComponentProps(
    slotProps?.actionBar ?? componentsProps?.actionBar,
    {} as any
  )?.actions?.length;
  return (
    <React.Fragment>
      <DateTimeViewWrapper>
        <DateCalendar
          view={isDatePickerView(view) ? view : "day"}
          onViewChange={onViewChange}
          views={views.filter(isDatePickerView)}
          focusedView={
            focusedView && isDatePickerView(focusedView) ? focusedView : null
          }
          onFocusedViewChange={onFocusedViewChange}
          value={value}
          defaultValue={defaultValue}
          onChange={onChange}
          className={className}
          classes={classes}
          disableFuture={disableFuture}
          disablePast={disablePast}
          minDate={minDate}
          maxDate={maxDate}
          shouldDisableDate={shouldDisableDate}
          shouldDisableMonth={shouldDisableMonth}
          shouldDisableYear={shouldDisableYear}
          reduceAnimations={reduceAnimations}
          onMonthChange={onMonthChange}
          monthsPerRow={monthsPerRow}
          onYearChange={onYearChange}
          yearsPerRow={yearsPerRow}
          defaultCalendarMonth={defaultCalendarMonth}
          components={components}
          componentsProps={componentsProps}
          slots={slots}
          slotProps={slotProps}
          loading={loading}
          renderLoading={renderLoading}
          disableHighlightToday={disableHighlightToday}
          readOnly={readOnly}
          disabled={disabled}
          showDaysOutsideCurrentMonth={showDaysOutsideCurrentMonth}
          dayOfWeekFormatter={dayOfWeekFormatter}
          sx={sx}
          autoFocus={autoFocus}
          fixedWeekNumber={fixedWeekNumber}
          displayWeekNumber={displayWeekNumber}
        />
        {timeViewsCount > 0 && (
          <React.Fragment>
            <Divider orientation="vertical" />
            <DigitalClock
              view={isInternalTimeView(view) ? view : "hours"}
              onViewChange={onViewChange}
              focusedView={
                focusedView && isInternalTimeView(focusedView)
                  ? focusedView
                  : null
              }
              onFocusedViewChange={onFocusedViewChange}
              views={views.filter(isInternalTimeView)}
              value={value}
              defaultValue={defaultValue}
              onChange={onChange}
              className={className}
              classes={classes}
              disableFuture={disableFuture}
              disablePast={disablePast}
              minTime={minTime}
              maxTime={maxTime}
              shouldDisableTime={shouldDisableTime}
              shouldDisableClock={shouldDisableClock}
              minutesStep={minutesStep}
              ampm={ampm}
              components={components}
              componentsProps={componentsProps}
              slots={slots}
              slotProps={slotProps}
              readOnly={readOnly}
              disabled={disabled}
              sx={{
                borderBottom: 0,
                width: "auto",
                maxHeight: VIEW_HEIGHT,
                ...(Array.isArray(sx) ? sx : [sx])
              }}
              autoFocus={autoFocus}
              disableIgnoringDatePartForTimeValidation={
                disableIgnoringDatePartForTimeValidation
              }
              timeSteps={timeSteps}
              skipDisabled={skipDisabled}
            />
          </React.Fragment>
        )}
      </DateTimeViewWrapper>
      {isActionBarVisible && <Divider />}
    </React.Fragment>
  );
};

// demo.js
import * as React from "react";
import dayjs from "dayjs";
import { DemoContainer, DemoItem } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDateTimePicker } from "@mui/x-date-pickers/DesktopDateTimePicker";
import { renderDesktopDateDigitalTimeView } from "./dateTimeViewRenderers";

export default function ResponsiveDateTimePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={["DesktopDateTimePicker"]}>
        <DemoItem label="Desktop single column time variant">
          <DesktopDateTimePicker
            defaultValue={dayjs("2022-04-17T15:30")}
            views={["hours"]}
            closeOnSelect={false}
            viewRenderers={{
              day: renderDesktopDateDigitalTimeView,
              hours: renderDesktopDateDigitalTimeView,
              meridiem: renderDesktopDateDigitalTimeView,
              minutes: renderDesktopDateDigitalTimeView,
              month: renderDesktopDateDigitalTimeView,
              seconds: renderDesktopDateDigitalTimeView,
              year: renderDesktopDateDigitalTimeView
            }}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

Motivation 🔦

We exclusively use a TimePicker with limited options, on the 1/2 hour. We do not need 4 clicks to pick the time. We want DateTimePicker that has a single column time dropdown. I was able to implement the feature in our code base.

Order ID 💳 (optional)

56150

[LukasTy]

@SlowBurner Thank you for pointing out the need for this! 👍
We'll look into providing a solution on our end, hopefully, one that would work similarly to the current behavior of the TimePicker: using a certain timeSteps configuration or changing the thresholdToRenderTimeInASingleColumn prop.

As for your solution, it's nice that you were able to easily cover your use case by providing a custom view renderer! 👍 💯