feat: added dateFormat and placeholder props

razorpay · Jan 14, 2025 · 90f8c7f · 90f8c7f
1 parent 368807a
commit 90f8c7f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git 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,
+    dateFormat,
+    placeholder,
     ...props
   }: DatePickerInputProps,
   ref: React.ForwardedRef<any>,
 ): 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';
@@ -109,7 +110,7 @@ const _DatePickerInput = (
   if (selectionType == 'single') {
     const dateValue = getFormattedDate({
       date,
-      format,
+      format: dateFormat,
       labelSeparator: '-',
       locale,
       type: 'default',
@@ -127,7 +128,7 @@ const _DatePickerInput = (
           id="start-date"
           labelPosition={labelPosition}
           label={label}
-          placeholder={format}
+          placeholder={placeholder || dateFormat}
           popupId={referenceProps['aria-controls']}
           isPopupExpanded={referenceProps['aria-expanded']}
           size={size}
@@ -164,14 +165,14 @@ const _DatePickerInput = (
     const startValue = getFormattedDate({
       type: 'default',
       date: date[0],
-      format,
+      format: dateFormat,
       labelSeparator: '-',
       locale,
     });
     const endValue = getFormattedDate({
       type: 'default',
       date: date[1],
-      format,
+      format: dateFormat,
       labelSeparator: '-',
       locale,
     });
@@ -197,7 +198,7 @@ const _DatePickerInput = (
             leadingIcon={CalendarIcon}
             label={label?.start}
             labelPosition={labelPosition}
-            placeholder={format}
+            placeholder={placeholder || dateFormat}
             popupId={referenceProps['aria-controls']}
             isPopupExpanded={referenceProps['aria-expanded']}
             size={size}
@@ -235,7 +236,7 @@ const _DatePickerInput = (
           />
           <DateInput
             id="end-date"
-            placeholder={format}
+            placeholder={placeholder || dateFormat}
             leadingIcon={CalendarIcon}
             label={shouldRenderEndLabel()}
             labelPosition={isLabelPositionLeft ? undefined : labelPosition}

diff --git a/packages/blade/src/components/DatePicker/DatePicker.web.tsx b/packages/blade/src/components/DatePicker/DatePicker.web.tsx
@@ -66,6 +66,8 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
   picker,
   onPickerChange,
   zIndex = componentZIndices.popover,
+  dateFormat = 'DD/MM/YYYY',
+  inputPlaceHolder,
   ...props
 }: DatePickerProps<Type> & StyledPropsBlade & DataAnalyticsAttribute): React.ReactElement => {
   const { i18nState } = useI18nContext();
@@ -304,6 +306,8 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
             validationState={validationState}
             autoFocus={autoFocus}
             necessityIndicator={necessityIndicator}
+            dateFormat={dateFormat}
+            placeholder={inputPlaceHolder}
             {...makeAnalyticsAttribute(props)}
           />
           {isMobile ? (

diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts
@@ -162,6 +162,14 @@ type DatePickerProps<Type extends DateSelectionType> = 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.
+     */
+    dateFormat?: string;
+    /**
+     *  Placeholder text for the datepicker input , when no date is selected. Default value is formatType.
+     */
+    inputPlaceHolder?: string;
   };
 
 type DatePickerRangeInputProps = {
@@ -195,7 +203,10 @@ type DatePickerCommonInputProps = {
   FormInputValidationProps;
 
 type DatePickerInputProps = DatePickerCommonInputProps &
-  (DatePickerRangeInputProps | DatePickerSingleInputProps);
+  (DatePickerRangeInputProps | DatePickerSingleInputProps) & {
+    dateFormat: string;
+    placeholder?: string;
+  };
 
 export type {
   CalendarProps,