diff --git a/packages/blade/src/components/DatePicker/DateInput.web.tsx b/packages/blade/src/components/DatePicker/DateInput.web.tsx index 0e81bd066b6..c9c090e189d 100644 --- a/packages/blade/src/components/DatePicker/DateInput.web.tsx +++ b/packages/blade/src/components/DatePicker/DateInput.web.tsx @@ -92,7 +92,7 @@ const _DatePickerInput = ( successText, errorText, helpText, - dateFormat, + format, placeholder, ...props }: DatePickerInputProps, @@ -110,7 +110,7 @@ const _DatePickerInput = ( if (selectionType == 'single') { const dateValue = getFormattedDate({ date, - format: dateFormat, + format, labelSeparator: '-', locale, type: 'default', @@ -128,7 +128,7 @@ const _DatePickerInput = ( id="start-date" labelPosition={labelPosition} label={label} - placeholder={placeholder || dateFormat} + placeholder={placeholder || format} popupId={referenceProps['aria-controls']} isPopupExpanded={referenceProps['aria-expanded']} size={size} @@ -165,14 +165,14 @@ const _DatePickerInput = ( const startValue = getFormattedDate({ type: 'default', date: date[0], - format: dateFormat, + format, labelSeparator: '-', locale, }); const endValue = getFormattedDate({ type: 'default', date: date[1], - format: dateFormat, + format, labelSeparator: '-', locale, }); @@ -198,7 +198,7 @@ const _DatePickerInput = ( leadingIcon={CalendarIcon} label={label?.start} labelPosition={labelPosition} - placeholder={placeholder || dateFormat} + placeholder={placeholder} popupId={referenceProps['aria-controls']} isPopupExpanded={referenceProps['aria-expanded']} size={size} @@ -236,7 +236,7 @@ const _DatePickerInput = ( /> ({ picker, onPickerChange, zIndex = componentZIndices.popover, - dateFormat, + format, inputPlaceHolder, ...props }: DatePickerProps & StyledPropsBlade & DataAnalyticsAttribute): React.ReactElement => { @@ -85,9 +85,9 @@ const DatePicker = ({ onPickerChange?.(picker); }, }); - const finalDateFormat = React.useMemo(() => { - if (dateFormat) { - return dateFormat; + const finalFormat = React.useMemo(() => { + if (format) { + return format; } if (picker === 'day') { return 'DD'; @@ -99,7 +99,7 @@ const DatePicker = ({ return 'YYYY'; } return 'DD/MM/YYYY'; - }, [dateFormat, picker]); + }, [format, picker]); const finalInputPlaceHolder = React.useMemo(() => { if (inputPlaceHolder) { @@ -337,7 +337,7 @@ const DatePicker = ({ validationState={validationState} autoFocus={autoFocus} necessityIndicator={necessityIndicator} - dateFormat={finalDateFormat} + format={finalFormat} placeholder={finalInputPlaceHolder} {...makeAnalyticsAttribute(props)} /> diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts index e3143c852c7..3644900c3de 100644 --- a/packages/blade/src/components/DatePicker/types.ts +++ b/packages/blade/src/components/DatePicker/types.ts @@ -166,7 +166,7 @@ type DatePickerProps = Omit< * Sets the date format to be displayed in the input field. * @default 'DD/MM/YYYY' if pickerType is 'date' then 'DD', if pickerType is 'month' then 'MMMM', 'YYYY' if pickerType is 'year' */ - dateFormat?: string; + format?: string; /** * Placeholder text for the datepicker input , when no date is selected. * @default 'DD/MM/YYYY' if pickerType is 'date' then 'DD', if pickerType is 'month' then 'MMMM', 'YYYY' if pickerType is 'year' @@ -206,7 +206,7 @@ type DatePickerCommonInputProps = { type DatePickerInputProps = DatePickerCommonInputProps & (DatePickerRangeInputProps | DatePickerSingleInputProps) & { - dateFormat: string; + format: string; placeholder?: string; };