@mui/x-date-pickers/hooks/useParsedFormat.mjs

The community edition of the MUI X Date and Time Picker components.

'use client';

import * as React from 'react';
import { usePickerAdapter } from "./usePickerAdapter.mjs";
import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.mjs";
import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.mjs";
import { usePickerTranslations } from "./usePickerTranslations.mjs";
import { useNullablePickerContext } from "../internals/hooks/useNullablePickerContext.mjs";
/**
 * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
 * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
 * @param {object} The parameters needed to build the placeholder.
 * @param {string} params.format Format to parse.
 * @returns
 */
export const useParsedFormat = (parameters = {}) => {
  const pickerContext = useNullablePickerContext();
  const adapter = usePickerAdapter();
  const translations = usePickerTranslations();
  const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
  const {
    format = pickerContext?.fieldFormat ?? adapter.formats.fullDate
  } = parameters;
  return React.useMemo(() => {
    const sections = buildSectionsFromFormat({
      adapter,
      format,
      formatDensity: 'dense',
      // Pass `isRtl: false` to prevent RTL format reversal.
      // `useParsedFormat` builds a display string, not a field layout.
      isRtl: false,
      shouldRespectLeadingZeros: true,
      localeText: translations,
      localizedDigits,
      date: null
    });
    return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
  }, [adapter, translations, localizedDigits, format]);
};