feat: add dateformat and placeholder prop for datepicker input [DSSUP-199] (#2472)

* fix: showLevelChangeLink only if picker is not defined

* feat: added dateFormat and placeholder props

* feat: added default values

* feat: add changeset

* chore: review changes

* chore: update date formats

* chore: update picker

* chore: updated types

* chore: udpdate jsdocs comments

Author: tewarig

.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.

packages/blade/src/components/DatePicker/Calendar.web.tsx

@@ -28,11 +28,13 @@ const Calendar = <Type extends DateSelectionType>({
   onNext,
   onPrevious,
   presets,
+  showLevelChangeLink,
   ...props
 }: CalendarProps<Type> & {
   date?: Date;
   defaultDate?: Date;
   onDateChange?: (date: DateValue) => void;
+  showLevelChangeLink?: boolean;
 }): React.ReactElement => {
   const isRange = selectionType === 'range';
 
@@ -125,6 +127,7 @@ const Calendar = <Type extends DateSelectionType>({
         onPreviousDecade={handlePreviousDecade}
         onNextYear={handleNextYear}
         onPreviousYear={handlePreviousYear}
+        showLevelChangeLink={showLevelChangeLink}
       />
       <CalendarGradientStyles isRange={isRange} date={currentDate}>
         <DatePicker

packages/blade/src/components/DatePicker/CalendarHeader.web.tsx

@@ -14,6 +14,7 @@ type CalendarHeaderProps = {
   isRange: boolean;
   date: DateValue | DatesRangeValue;
   pickerType: PickerType;
+  showLevelChangeLink?: boolean;
   onNextMonth: () => 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 ? (
+    <Link
+      onClick={onClick}
+      size="large"
+      variant="button"
+      color="neutral"
+      iconPosition="right"
+      icon={ChevronDownIcon}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {text}
+    </Link>
+  ) : (
+    <Text size="large" weight="medium" color="interactive.text.neutral.normal">
+      {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 = ({
       ) : (
         <Box display="flex" gap="spacing.5" alignItems="center">
           {pickerType === 'day' && (
-            <Link
-              onClick={() => {
-                onLevelChange('year');
-              }}
-              size="large"
-              variant="button"
-              color="neutral"
-              iconPosition="right"
-              icon={ChevronDownIcon}
+            <CalendarLevelIndicator
+              onClick={() => onLevelChange('month')}
+              showLevelChangeLink={showLevelChangeLink}
               accessibilityLabel="Change month"
-            >
-              {month} {year}
-            </Link>
+              text={`${month} ${year}`}
+            />
           )}
+
           {pickerType === 'month' && (
-            <Link
-              onClick={() => {
-                onLevelChange('decade');
-              }}
-              size="large"
-              variant="button"
-              color="neutral"
-              iconPosition="right"
-              icon={ChevronDownIcon}
+            <CalendarLevelIndicator
+              onClick={() => onLevelChange('decade')}
+              showLevelChangeLink={showLevelChangeLink}
               accessibilityLabel="Change decade"
-            >
-              {year}
-            </Link>
+              text={year}
+            />
           )}
           {pickerType === 'year' && (
             <Text size="large" weight="medium" color="interactive.text.neutral.normal">

packages/blade/src/components/DatePicker/DateInput.web.tsx

@@ -92,12 +92,13 @@ const _DatePickerInput = (
     successText,
     errorText,
     helpText,
+    format,
+    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';
@@ -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 = (
           />
           <DateInput
             id="end-date"
-            placeholder={format}
+            placeholder={placeholder}
             leadingIcon={CalendarIcon}
             label={shouldRenderEndLabel()}
             labelPosition={isLabelPositionLeft ? undefined : labelPosition}

packages/blade/src/components/DatePicker/DatePicker.web.tsx

@@ -66,6 +66,8 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
   picker,
   onPickerChange,
   zIndex = componentZIndices.popover,
+  format = 'DD/MM/YYYY',
+  inputPlaceHolder,
   ...props
 }: DatePickerProps<Type> & StyledPropsBlade & DataAnalyticsAttribute): React.ReactElement => {
   const { i18nState } = useI18nContext();
@@ -83,6 +85,31 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
       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 = <Type extends DateSelectionType = 'single'>({
             forceRerender();
           }}
           picker={_picker}
+          showLevelChangeLink={!picker}
           onPickerChange={(picker) => {
             setPicker(() => picker);
             forceRerender();
@@ -303,6 +331,8 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
             validationState={validationState}
             autoFocus={autoFocus}
             necessityIndicator={necessityIndicator}
+            format={finalFormat}
+            placeholder={finalInputPlaceHolder}
             {...makeAnalyticsAttribute(props)}
           />
           {isMobile ? (

packages/blade/src/components/DatePicker/types.ts

@@ -162,6 +162,16 @@ 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.
+     * @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,