[docs] New recipe of a read-only field

docs/data/date-pickers/custom-field/CustomReadonlyBehaviorMaterialTextField.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+import { useSplitFieldProps, useFieldPlaceholder } from '@mui/x-date-pickers/hooks';
+import TextField from '@mui/material/TextField';
+
+function ReadonlyField(props) {
+  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+  const { value, timezone, format } = internalProps;
+  const { InputProps, slotProps, slots, ...other } = forwardedProps;
+
+  const placeholder = useFieldPlaceholder(internalProps);
+  const { hasValidationError } = useValidation({
+    validator: validateDate,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  return (
+    <TextField
+      {...other}
+      value={value == null ? '' : value.format(format)}
+      placeholder={placeholder}
+      InputProps={{ ...InputProps, readOnly: true }}
+      error={hasValidationError}
+    />
+  );
+}
+
+function ReadonlyFieldDatePicker(props) {
+  return <DatePicker slots={{ ...props.slots, field: ReadonlyField }} {...props} />;
+}
+
+export default function CustomReadonlyBehaviorMaterialTextField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <ReadonlyFieldDatePicker />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-field/CustomReadonlyBehaviorMaterialTextField.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { DateFieldInPickerProps } from '@mui/x-date-pickers/DateField';
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+import { useSplitFieldProps, useFieldPlaceholder } from '@mui/x-date-pickers/hooks';
+import TextField from '@mui/material/TextField';
+
+function ReadonlyField(props: DateFieldInPickerProps<Dayjs, false>) {
+  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+  const { value, timezone, format } = internalProps;
+  const { InputProps, slotProps, slots, ...other } = forwardedProps;
+
+  const placeholder = useFieldPlaceholder(internalProps);
+  const { hasValidationError } = useValidation({
+    validator: validateDate,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  return (
+    <TextField
+      {...other}
+      value={value == null ? '' : value.format(format)}
+      placeholder={placeholder}
+      InputProps={{ ...InputProps, readOnly: true }}
+      error={hasValidationError}
+    />
+  );
+}
+
+function ReadonlyFieldDatePicker(
+  props: Omit<DatePickerProps<Dayjs>, 'open' | 'onOpen' | 'onClose'>,
+) {
+  return <DatePicker slots={{ ...props.slots, field: ReadonlyField }} {...props} />;
+}
+
+export default function CustomReadonlyBehaviorMaterialTextField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <ReadonlyFieldDatePicker />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-field/custom-field.md

@@ -151,6 +151,10 @@ Learn more about the accessible DOM structure and its difference compared to the
 
 ## Usage with another UI
 
+### Using a read-only `TextField`
+
+{{"demo": "CustomReadonlyBehaviorMaterialTextField.js", "defaultCodeOpen": false}}
+
 ### Using an `Autocomplete`
 
 If your user can only select a value in a small list of available dates,

packages/x-date-pickers/src/hooks/index.tsx

@@ -9,3 +9,5 @@ export type {
 export { usePickersTranslations } from './usePickersTranslations';
 
 export { useSplitFieldProps } from './useSplitFieldProps';
+
+export { useFieldPlaceholder } from './useFieldPlaceholder';

packages/x-date-pickers/src/hooks/useFieldPlaceholder.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useUtils } from '../internals/hooks/useUtils';
+import { buildSectionsFromFormat } from '../internals/hooks/useField/buildSectionsFromFormat';
+import { getLocalizedDigits } from '../internals/hooks/useField/useField.utils';
+import { PickersTimezone, PickerValidDate } from '../models';
+import { usePickersTranslations } from './usePickersTranslations';
+
+interface UseFieldPlaceholderParams {
+  format: string;
+  formatDensity?: 'dense' | 'spacious';
+  timezone: PickersTimezone;
+  shouldRespectLeadingZeros?: boolean;
+}
+
+export const useFieldPlaceholder = <TDate extends PickerValidDate>({
+  format,
+  formatDensity = 'dense',
+  timezone,
+  shouldRespectLeadingZeros = false,
+}: UseFieldPlaceholderParams) => {
+  const utils = useUtils<TDate>();
+  const isRtl = useRtl();
+  const translations = usePickersTranslations<TDate>();
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
+
+  return React.useMemo(() => {
+    const sections = buildSectionsFromFormat({
+      utils,
+      format,
+      formatDensity,
+      isRtl,
+      timezone,
+      shouldRespectLeadingZeros,
+      localeText: translations,
+      localizedDigits,
+      date: null,
+      // TODO v9: Make sure we still don't reverse in `buildSectionsFromFormat` when using `useFieldPlaceholder`.
+      enableAccessibleFieldDOMStructure: false,
+    });
+
+    return sections
+      .map((section) => `${section.startSeparator}${section.placeholder}${section.endSeparator}`)
+      .join('');
+  }, [
+    utils,
+    isRtl,
+    translations,
+    localizedDigits,
+    format,
+    formatDensity,
+    timezone,
+    shouldRespectLeadingZeros,
+  ]);
+};