diff --git a/.changeset/yellow-cameras-knock.md b/.changeset/yellow-cameras-knock.md new file mode 100644 index 00000000000..59eda7028c1 --- /dev/null +++ b/.changeset/yellow-cameras-knock.md @@ -0,0 +1,6 @@ +--- +'@razorpay/blade': patch +--- + +feat(blade): add dateformat and placeholder prop for datepicker input +fix(blade): Removed the chevron icon when the picker prop is used. diff --git a/packages/blade/src/components/DatePicker/Calendar.web.tsx b/packages/blade/src/components/DatePicker/Calendar.web.tsx index 6624e954a9d..bab9202113d 100644 --- a/packages/blade/src/components/DatePicker/Calendar.web.tsx +++ b/packages/blade/src/components/DatePicker/Calendar.web.tsx @@ -28,11 +28,13 @@ const Calendar = ({ onNext, onPrevious, presets, + showLevelChangeLink, ...props }: CalendarProps & { date?: Date; defaultDate?: Date; onDateChange?: (date: DateValue) => void; + showLevelChangeLink?: boolean; }): React.ReactElement => { const isRange = selectionType === 'range'; @@ -125,6 +127,7 @@ const Calendar = ({ onPreviousDecade={handlePreviousDecade} onNextYear={handleNextYear} onPreviousYear={handlePreviousYear} + showLevelChangeLink={showLevelChangeLink} /> void; onPreviousMonth: () => void; onNextYear: () => void; @@ -22,6 +23,35 @@ type CalendarHeaderProps = { onPreviousDecade: () => void; onLevelChange: (level: MantineCalendarLevel) => void; }; +const CalendarLevelIndicator = ({ + onClick, + showLevelChangeLink, + accessibilityLabel, + text, +}: { + onClick: () => void; + showLevelChangeLink?: boolean; + accessibilityLabel: string; + text: string; +}): React.ReactElement => { + return showLevelChangeLink ? ( + + {text} + + ) : ( + + {text} + + ); +}; const CalendarHeader = ({ isRange, @@ -34,7 +64,10 @@ const CalendarHeader = ({ onPreviousYear, onPreviousDecade, onLevelChange, -}: CalendarHeaderProps): React.ReactElement => { + showLevelChangeLink, +}: CalendarHeaderProps & { + showLevelChangeLink?: boolean; +}): React.ReactElement => { const { i18nState } = useI18nContext(); const locale = convertIntlToDayjsLocale(i18nState?.locale ?? 'en-IN'); @@ -135,34 +168,21 @@ const CalendarHeader = ({ ) : ( {pickerType === 'day' && ( - { - onLevelChange('year'); - }} - size="large" - variant="button" - color="neutral" - iconPosition="right" - icon={ChevronDownIcon} + onLevelChange('month')} + showLevelChangeLink={showLevelChangeLink} accessibilityLabel="Change month" - > - {month} {year} - + text={`${month} ${year}`} + /> )} + {pickerType === 'month' && ( - { - onLevelChange('decade'); - }} - size="large" - variant="button" - color="neutral" - iconPosition="right" - icon={ChevronDownIcon} + onLevelChange('decade')} + showLevelChangeLink={showLevelChangeLink} accessibilityLabel="Change decade" - > - {year} - + text={year} + /> )} {pickerType === 'year' && ( diff --git a/packages/blade/src/components/DatePicker/DateInput.web.tsx b/packages/blade/src/components/DatePicker/DateInput.web.tsx index af0aa8a8e96..c9c090e189d 100644 --- a/packages/blade/src/components/DatePicker/DateInput.web.tsx +++ b/packages/blade/src/components/DatePicker/DateInput.web.tsx @@ -92,12 +92,13 @@ const _DatePickerInput = ( successText, errorText, helpText, + format, + placeholder, ...props }: DatePickerInputProps, ref: React.ForwardedRef, ): React.ReactElement => { const isMobile = useIsMobile(); - const format = 'DD/MM/YYYY'; const isLarge = size === 'large'; const hasLabel = typeof label === 'string' ? Boolean(label) : Boolean(label?.start || label?.end); const isLabelPositionLeft = labelPosition === 'left'; @@ -127,7 +128,7 @@ const _DatePickerInput = ( id="start-date" labelPosition={labelPosition} label={label} - placeholder={format} + placeholder={placeholder || format} popupId={referenceProps['aria-controls']} isPopupExpanded={referenceProps['aria-expanded']} size={size} @@ -197,7 +198,7 @@ const _DatePickerInput = ( leadingIcon={CalendarIcon} label={label?.start} labelPosition={labelPosition} - placeholder={format} + placeholder={placeholder} popupId={referenceProps['aria-controls']} isPopupExpanded={referenceProps['aria-expanded']} size={size} @@ -235,7 +236,7 @@ const _DatePickerInput = ( /> ({ picker, onPickerChange, zIndex = componentZIndices.popover, + format = 'DD/MM/YYYY', + inputPlaceHolder, ...props }: DatePickerProps & StyledPropsBlade & DataAnalyticsAttribute): React.ReactElement => { const { i18nState } = useI18nContext(); @@ -83,6 +85,31 @@ const DatePicker = ({ onPickerChange?.(picker); }, }); + const finalFormat = React.useMemo(() => { + if (format) { + return format; + } + if (picker === 'month') { + return 'MMMM'; + } + if (picker === 'year') { + return 'YYYY'; + } + return 'DD/MM/YYYY'; + }, [format, picker]); + + const finalInputPlaceHolder = React.useMemo(() => { + if (inputPlaceHolder) { + return inputPlaceHolder; + } + if (picker === 'month') { + return 'Month'; + } + if (picker === 'year') { + return 'Year'; + } + return 'DD/MM/YYYY'; + }, [inputPlaceHolder, picker]); const { onDateChange, @@ -237,6 +264,7 @@ const DatePicker = ({ forceRerender(); }} picker={_picker} + showLevelChangeLink={!picker} onPickerChange={(picker) => { setPicker(() => picker); forceRerender(); @@ -303,6 +331,8 @@ const DatePicker = ({ validationState={validationState} autoFocus={autoFocus} necessityIndicator={necessityIndicator} + format={finalFormat} + placeholder={finalInputPlaceHolder} {...makeAnalyticsAttribute(props)} /> {isMobile ? ( diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts index f5c1cfac9d1..32185becd95 100644 --- a/packages/blade/src/components/DatePicker/types.ts +++ b/packages/blade/src/components/DatePicker/types.ts @@ -162,6 +162,16 @@ type DatePickerProps = Omit< */ onApply?: Type extends 'single' ? (value: DateValue) => void : (value: DatesRangeValue) => void; labelPosition?: BaseInputProps['labelPosition']; + /** + * Sets the date format to be displayed in the input field. + * @default 'DD/MM/YYYY' if pickerType is 'month' then 'MMMM', 'YYYY' if pickerType is 'year' + */ + format?: 'DD/MM/YYYY' | 'MMM' | 'MMMM' | 'YYYY'; + /** + * Placeholder text for the datepicker input , when no date is selected. + * @default 'DD/MM/YYYY' if pickerType is 'month' then 'MMMM', 'YYYY' if pickerType is 'year' + */ + inputPlaceHolder?: string; }; type DatePickerRangeInputProps = { @@ -195,7 +205,10 @@ type DatePickerCommonInputProps = { FormInputValidationProps; type DatePickerInputProps = DatePickerCommonInputProps & - (DatePickerRangeInputProps | DatePickerSingleInputProps); + (DatePickerRangeInputProps | DatePickerSingleInputProps) & { + format: string; + placeholder?: string; + }; export type { CalendarProps,