diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 4d82ca28b4ad3..d60d89b6efc0d 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -170,6 +170,7 @@ export interface UseFieldV6ForwardedProps { onClick?: React.MouseEventHandler; onFocus?: () => void; onPaste?: React.ClipboardEventHandler; + placeholder?: string; } interface UseFieldV6AdditionalProps diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts index 6c666fa22dddb..4f8c89d11f415 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts @@ -80,7 +80,14 @@ export const useFieldV6TextField: UseFieldTextField = (params) => { const focusTimeoutRef = React.useRef>(); const { - forwardedProps: { onFocus, onClick, onPaste, onBlur, inputRef: inputRefProp }, + forwardedProps: { + onFocus, + onClick, + onPaste, + onBlur, + inputRef: inputRefProp, + placeholder: inPlaceholder, + }, internalProps: { readOnly = false }, parsedSelectedSections, activeSectionIndex, @@ -381,15 +388,24 @@ export const useFieldV6TextField: UseFieldTextField = (params) => { applyCharacterEditing({ keyPressed, sectionIndex: activeSectionIndex }); }); - const placeholder = React.useMemo( - () => - fieldValueManager.getV6InputValueFromSections( - getSectionsFromValue(valueManager.emptyValue), - localizedDigits, - isRTL, - ), - [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL], - ); + const placeholder = React.useMemo(() => { + if (inPlaceholder) { + return inPlaceholder; + } + + return fieldValueManager.getV6InputValueFromSections( + getSectionsFromValue(valueManager.emptyValue), + localizedDigits, + isRTL, + ); + }, [ + inPlaceholder, + fieldValueManager, + getSectionsFromValue, + valueManager.emptyValue, + localizedDigits, + isRTL, + ]); const valueStr = React.useMemo( () =>