pixel-react 1.8.4 → 1.8.6

package/src/components/DatePicker/DatePicker.tsx

@@ -1,502 +1,510 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { DayPicker } from 'react-day-picker';
-import { formatInTimeZone } from 'date-fns-tz';
-import TimePicker from './Timepicker';
-import Icon from '../Icon';
-import './DatePicker.scss';
-import {
-  DatePickerProps,
-  CustomCaptionProps,
-  CustomCalenderButtonProps,
-} from './types';
-import Button from '../Button';
-import Typography from '../Typography';
-import classNames from 'classnames';
-
-const CustomDatePicker: React.FC<DatePickerProps> = ({
-  minDate,
-  maxDate,
-  value,
-  onChange,
-  placeholder = 'Select a date',
-  disabled = false,
-  dateFormat = 'EEEE, dd MMM yyyy',
-  calendarWidth,
-  timezone = 'Asia/Kolkata',
-  timeFormat = 'hh:mm a',
-  error,
-  helperText = '',
-  dateOnly = false,
-}) => {
-  const [timeValue, setTimeValue] = useState<string>('');
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
-  const [isPickerOpen, setIsPickerOpen] = useState<boolean>(false);
-  const [timeError, setTimeError] = useState<boolean>(false);
-  const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
-    new Date()
-  );
-  const [view, setView] = useState<string>('days');
-  const [startYear, setStartYear] = useState(() => {
-    const currentYear =
-      selectedMonth?.getFullYear() ?? new Date().getFullYear();
-    return currentYear - (currentYear % 12); // Set to the first year in the 12-year range
-  });
-  const [datePickerPosition, setDatePickerPosition] = useState<
-    'top' | 'bottom'
-  >('bottom');
-  const pickerRef = useRef<HTMLDivElement>(null); // Ref to track the picker
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (value) {
-      setTimeValue(formatTimeStr(value));
-      setSelectedDate(value);
-    }
-  }, [value, isPickerOpen]);
-
-  const formatTimeStr = (date: Date): string => {
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    return `${hours}:${minutes}`;
-  };
-
-  // Convert minDate and maxDate to "hh:mm" for the TimePicker if the dates match
-  const minTime =
-    selectedDate &&
-    minDate &&
-    selectedDate.toDateString() === minDate.toDateString()
-      ? formatTimeStr(minDate)
-      : undefined;
-
-  const maxTime =
-    selectedDate &&
-    maxDate &&
-    selectedDate.toDateString() === maxDate.toDateString()
-      ? formatTimeStr(maxDate)
-      : undefined;
-
-  useEffect(() => {
-    const adjustPosition = () => {
-      if (containerRef.current && pickerRef.current) {
-        const relativeRect = containerRef.current.getBoundingClientRect();
-        const absoluteRect = pickerRef.current.getBoundingClientRect();
-
-        const spaceBelow = window.innerHeight - relativeRect.bottom;
-        const spaceAbove = relativeRect.top;
-
-        // Check if there is more space above than below
-        if (
-          spaceBelow < absoluteRect.height &&
-          spaceAbove >= absoluteRect.height
-        ) {
-          setDatePickerPosition('top');
-        } else {
-          setDatePickerPosition('bottom');
-        }
-      }
-    };
-
-    // Initial check
-    adjustPosition();
-
-    // Adjust position on window resize
-    window.addEventListener('resize', adjustPosition);
-    return () => window.removeEventListener('resize', adjustPosition);
-  }, []);
-
-  const calendarStyle = {
-    '--rdp-day-width': calendarWidth ? `${calendarWidth / 7 - 4}px` : undefined,
-  } as React.CSSProperties;
-
-  const handleTimeChange = (time: string) => {
-    setTimeValue(time);
-    if (selectedDate) {
-      const [hoursStr, minutesStr] = time.split(':');
-      const newSelectedDate = new Date(selectedDate);
-      newSelectedDate.setHours(parseInt(hoursStr ? hoursStr : '0', 10));
-      newSelectedDate.setMinutes(
-        parseInt(minutesStr ? minutesStr : '0', 10) || 0
-      );
-      setSelectedDate(newSelectedDate);
-    }
-  };
-
-  const handleDaySelect = (date: Date | undefined) => {
-    if (dateOnly) {
-      setSelectedDate(date);
-      onChange(date);
-      resetAndCloseDatePicker();
-    } else {
-      if (!timeValue || !date) {
-        // if need to set time to current time in case no time selected
-        const now = new Date();
-        date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
-
-        setSelectedDate(date);
-      } else {
-        const [hoursStr, minutesStr] = timeValue.split(':');
-        date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
-        date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
-        setSelectedDate(date);
-      }
-    }
-  };
-
-  const handleSave = () => {
-    onChange(selectedDate);
-    resetAndCloseDatePicker();
-  };
-
-  const handleDateInputClick = () => {
-    setIsPickerOpen((prev) => !prev);
-    setView('days');
-    setSelectedMonth(value ?? new Date());
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      pickerRef.current &&
-      !pickerRef.current.contains(event.target as Node)
-    ) {
-      resetAndCloseDatePicker();
-    }
-  };
-
-  const handleCancel = () => {
-    resetAndCloseDatePicker();
-  };
-
-  const resetAndCloseDatePicker = () => {
-    setIsPickerOpen(false); // Close the picker if the click was outside
-    setView('days'); // Return to default day view on close of day picker
-    setSelectedMonth(value ?? new Date());
-  };
-
-  useEffect(() => {
-    if (isPickerOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside); // Clean up the event listener
-    };
-  }, [isPickerOpen]);
-
-  const months = Array.from({ length: 12 }, (_, i) =>
-    new Date(0, i).toLocaleString('default', { month: 'long' })
-  );
-  const years = Array.from({ length: 12 }, (_, i) => startYear + i);
-
-  const handleMonthClick = () => setView('months');
-  const handleYearClick = () => setView('years');
-
-  const handleMonthSelect = (monthIndex: number) => {
-    const newDate = new Date(selectedMonth || '');
-    newDate.setMonth(monthIndex);
-    setSelectedMonth(newDate);
-    setView('days');
-  };
-
-  const handleYearSelect = (year: number) => {
-    const newDate = new Date(selectedMonth || '');
-    newDate.setFullYear(year);
-    setSelectedMonth(newDate);
-    setView('days');
-  };
-
-  const handleNextClick = () => {
-    if (view === 'years') {
-      setStartYear((prev) => prev + 12);
-    }
-  };
-
-  const handlePrevClick = () => {
-    if (view === 'years') {
-      setStartYear((prev) => prev - 12);
-    }
-  };
-
-  const isDisabledDate = (
-    year: number | null,
-    month: number | null,
-    minDate?: Date,
-    maxDate?: Date
-  ): boolean => {
-    const isMinDateValid = minDate instanceof Date && !isNaN(minDate.getTime());
-    const isMaxDateValid = maxDate instanceof Date && !isNaN(maxDate.getTime());
-
-    if (isMinDateValid) {
-      if (year !== null && year < minDate.getFullYear()) return true;
-      if (
-        year !== null &&
-        month !== null &&
-        year === minDate.getFullYear() &&
-        month < minDate.getMonth()
-      )
-        return true;
-    }
-
-    if (isMaxDateValid) {
-      if (year !== null && year > maxDate.getFullYear()) return true;
-      if (
-        year !== null &&
-        month !== null &&
-        year === maxDate.getFullYear() &&
-        month > maxDate.getMonth()
-      )
-        return true;
-    }
-
-    return false;
-  };
-
-  useEffect(() => {
-    if (isPickerOpen && view === 'years') {
-      const currentYear =
-        selectedMonth?.getFullYear() ?? new Date().getFullYear();
-      setStartYear(currentYear - (currentYear % 12)); // Reset to the first year in the range that contains the selected year
-    }
-  }, [isPickerOpen, selectedMonth, view]);
-
-  // Custom Caption Component
-  const CustomCaption: React.FC<CustomCaptionProps> = ({ children }) => {
-    // If children is a React node (like an element), render it directly
-    if (React.isValidElement(children)) {
-      return <div>{children}</div>;
-    }
-
-    const [month = '', year = ''] = String(children).split(' ');
-
-    return (
-      <Typography
-        as="div"
-        fontWeight="medium"
-        lineHeight="16.8px"
-        className="ff-calendar-haeder"
-      >
-        <span onClick={handleMonthClick} className="ff-cursor-pointer">
-          {month}
-        </span>
-        <span onClick={handleYearClick} className="ff-cursor-pointer">
-          {year}
-        </span>
-      </Typography>
-    );
-  };
-
-  // Custom MonthGrid Component
-  const CustomMonthGrid: React.FC = () => {
-    return (
-      <div className="ff-custom-month_grid">
-        {months.map((month: string, index: number) => {
-          const isDisabled = isDisabledDate(
-            selectedMonth?.getFullYear() || null,
-            index,
-            minDate,
-            maxDate
-          );
-
-          return (
-            <div
-              key={index}
-              onClick={() => !isDisabled && handleMonthSelect(index)}
-              className={classNames('ff-custom-month', {
-                'ff-custom-month--selected':
-                  index === selectedMonth?.getMonth(),
-                'ff-custom-month--disabled': isDisabled,
-              })}
-            >
-              <Typography>{month}</Typography>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  const CustomPrevButton: React.FC<CustomCalenderButtonProps> = ({
-    disabled,
-    onClick,
-  }) => {
-    return (
-      <button
-        className="ff-calendar-nav-button"
-        onClick={onClick}
-        disabled={disabled}
-      >
-        <Icon name="left_arrow_icon" height={20} width={20} />
-      </button>
-    );
-  };
-  const CustomNextButton: React.FC<CustomCalenderButtonProps> = ({
-    disabled,
-    onClick,
-  }) => {
-    return (
-      <button
-        className="ff-calendar-nav-button"
-        onClick={onClick}
-        disabled={disabled}
-      >
-        <Icon name="right_arrow_icon" height={20} width={20} />
-      </button>
-    );
-  };
-
-  // Custom YearGrid Component
-  const CustomYearGrid: React.FC = () => {
-    return (
-      <div className="ff-custom-year_grid">
-        {years.map((year: number) => {
-          const isDisabled = isDisabledDate(year, null, minDate, maxDate);
-
-          return (
-            <div
-              key={year}
-              onClick={() => !isDisabled && handleYearSelect(year)}
-              className={classNames('ff-custom-year', {
-                'ff-custom-year--selected':
-                  year === selectedMonth?.getFullYear(),
-                'ff-custom-year--disabled': isDisabled,
-              })}
-            >
-              <Typography>{year}</Typography>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  return (
-    <div className="ff-date-picker" ref={containerRef}>
-      <div className="ff-datepicker-input-container">
-        <div className="ff-input-with-icon ff-date-input-field">
-          <Icon
-            name={'calendar_icon'}
-            hoverEffect={false}
-            className="ff-calendar-icon"
-          />
-          <input
-            type="text"
-            value={value ? formatInTimeZone(value, timezone, dateFormat) : ''}
-            readOnly
-            placeholder={placeholder}
-            className="ff-date-input"
-            disabled={disabled}
-            onClick={handleDateInputClick}
-          />
-          {helperText && error && (
-            <span
-              className={classNames('ff-date-input-message', {
-                'ff-date-input-message--danger': !!error,
-              })}
-            >
-              {helperText}
-            </span>
-          )}
-        </div>
-
-        {!dateOnly && (
-          <div className="ff-input-with-icon ff-time-input-field">
-            <Icon
-              name={'clock_icon'}
-              hoverEffect={false}
-              className="ff-clock-icon"
-            />
-            <input
-              type="text"
-              placeholder="Select time"
-              className="ff-time-input"
-              value={value ? formatInTimeZone(value, timezone, timeFormat) : ''}
-              disabled={disabled}
-              onClick={handleDateInputClick}
-              readOnly
-            />
-          </div>
-        )}
-      </div>
-
-      {isPickerOpen && (
-        <div
-          className="ff-date-picker-container"
-          ref={pickerRef}
-          style={{
-            top: datePickerPosition === 'top' ? 'auto' : '110%',
-            bottom: datePickerPosition === 'top' ? '110%' : 'auto',
-          }}
-        >
-          <div className="ff-calendar-container">
-            <DayPicker
-              style={calendarStyle}
-              className="ff-calendar"
-              mode="single"
-              selected={selectedDate}
-              onSelect={handleDaySelect}
-              month={selectedMonth}
-              onMonthChange={(month) => {
-                if (view === 'days') {
-                  setSelectedMonth(month);
-                }
-              }}
-              onNextClick={handleNextClick}
-              onPrevClick={handlePrevClick}
-              disableNavigation={view === 'months'}
-              disabled={[
-                {
-                  before: new Date(minDate ? minDate : ''),
-                  after: new Date(maxDate ? maxDate : ''),
-                },
-              ]}
-              timeZone={timezone}
-              components={{
-                CaptionLabel: (props) => <CustomCaption {...props} />,
-                PreviousMonthButton: (props) => <CustomPrevButton {...props} />,
-                NextMonthButton: (props) => <CustomNextButton {...props} />,
-                ...(view === 'months'
-                  ? {
-                      MonthGrid: () => <CustomMonthGrid />,
-                    }
-                  : {}),
-                ...(view === 'years'
-                  ? {
-                      MonthGrid: () => <CustomYearGrid />,
-                    }
-                  : {}),
-              }}
-            />
-            {!dateOnly && (
-              <TimePicker
-                value={timeValue}
-                onChange={handleTimeChange}
-                minTime={minTime}
-                maxTime={maxTime}
-                onErrorChange={setTimeError}
-              />
-            )}
-          </div>
-          {!dateOnly && (
-            <div className="ff-date-picker-controls">
-              <Button
-                className="ff-date-picker-button"
-                variant="secondary"
-                onClick={handleCancel}
-                label="Cancel"
-              />
-              <Button
-                className="ff-date-picker-button"
-                variant="primary"
-                onClick={handleSave}
-                label="Save"
-                disabled={timeError}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CustomDatePicker;
+import React, { useEffect, useState, useRef } from 'react';
+import { DayPicker } from 'react-day-picker';
+import { formatInTimeZone } from 'date-fns-tz';
+import TimePicker from './Timepicker';
+import Icon from '../Icon';
+import './DatePicker.scss';
+import {
+  DatePickerProps,
+  CustomCaptionProps,
+  CustomCalenderButtonProps,
+} from './types';
+import Button from '../Button';
+import Typography from '../Typography';
+import classNames from 'classnames';
+
+const CustomDatePicker: React.FC<DatePickerProps> = ({
+  minDate,
+  maxDate,
+  value,
+  onChange,
+  placeholder = 'Select a date',
+  disabled = false,
+  dateFormat = 'EEEE, dd MMM yyyy',
+  calendarWidth,
+  timezone = 'Asia/Kolkata',
+  timeFormat = 'hh:mm a',
+  error,
+  helperText = '',
+  dateOnly = false,
+  className,
+  zIndex = 10,
+}) => {
+  const [timeValue, setTimeValue] = useState<string>('');
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+  const [isPickerOpen, setIsPickerOpen] = useState<boolean>(false);
+  const [timeError, setTimeError] = useState<boolean>(false);
+  const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
+    new Date()
+  );
+  const [view, setView] = useState<string>('days');
+
+  const selectedDateRef = useRef<Date | undefined>(undefined);
+  const [startYear, setStartYear] = useState(() => {
+    const currentYear =
+      selectedMonth?.getFullYear() ?? new Date().getFullYear();
+    return currentYear - (currentYear % 12); // Set to the first year in the 12-year range
+  });
+
+  const pickerRef = useRef<HTMLDivElement>(null); // Ref to track the picker
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    selectedDateRef.current = selectedDate;
+  }, [selectedDate]);
+
+  useEffect(() => {
+    if (value) {
+      setTimeValue(formatTimeStr(value));
+      setSelectedDate(value);
+    }
+  }, [value, isPickerOpen]);
+
+  const formatTimeStr = (date: Date): string => {
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+  };
+
+  // Convert minDate and maxDate to "hh:mm" for the TimePicker if the dates match
+  const minTime =
+    selectedDate &&
+    minDate &&
+    selectedDate.toDateString() === minDate.toDateString()
+      ? formatTimeStr(minDate)
+      : undefined;
+
+  const maxTime =
+    selectedDate &&
+    maxDate &&
+    selectedDate.toDateString() === maxDate.toDateString()
+      ? formatTimeStr(maxDate)
+      : undefined;
+
+  useEffect(() => {
+    const adjustPosition = () => {
+      if (containerRef.current && pickerRef.current) {
+        const relativeRect = containerRef.current.getBoundingClientRect();
+        const pickerHeight = pickerRef.current.offsetHeight;
+        const spacing = 5; // spacing in pixels
+
+        const spaceBelow = window.innerHeight - relativeRect.bottom;
+        const spaceAbove = relativeRect.top;
+
+        let top = relativeRect.bottom + window.scrollY + spacing; // Default position to below
+        if (spaceBelow < pickerHeight && spaceAbove >= pickerHeight) {
+          top = relativeRect.top + window.scrollY - pickerHeight - spacing; // Place above
+        }
+
+        // Horizontal position: align to container with optional adjustments
+        const left = relativeRect.left + window.scrollX;
+
+        pickerRef.current.style.top = `${top}px`;
+        pickerRef.current.style.left = `${left}px`;
+      }
+    };
+
+    // Initial adjustment
+    adjustPosition();
+
+    // Recalculate on resize
+    window.addEventListener('resize', adjustPosition);
+    return () => window.removeEventListener('resize', adjustPosition);
+  }, [isPickerOpen]);
+
+  const calendarStyle = {
+    '--rdp-day-width': calendarWidth ? `${calendarWidth / 7 - 4}px` : undefined,
+  } as React.CSSProperties;
+
+  const handleTimeChange = (time: string) => {
+    setTimeValue(time);
+    if (selectedDate) {
+      const [hoursStr, minutesStr] = time.split(':');
+      const newSelectedDate = new Date(selectedDate);
+      newSelectedDate.setHours(parseInt(hoursStr ? hoursStr : '0', 10));
+      newSelectedDate.setMinutes(
+        parseInt(minutesStr ? minutesStr : '0', 10) || 0
+      );
+      setSelectedDate(newSelectedDate);
+    }
+  };
+
+  const handleDaySelect = (date: Date | undefined) => {
+    if (dateOnly) {
+      setSelectedDate(date);
+      onChange(date);
+      resetAndCloseDatePicker();
+    } else {
+      if (!timeValue || !date) {
+        // if need to set time to current time in case no time selected
+        const now = new Date();
+        date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+
+        setSelectedDate(date);
+      } else {
+        const [hoursStr, minutesStr] = timeValue.split(':');
+        date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
+        date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
+        setSelectedDate(date);
+      }
+    }
+  };
+
+  const handleSave = () => {
+    console.log('selectedDate1', selectedDateRef.current);
+    onChange(selectedDateRef.current);
+    resetAndCloseDatePicker();
+  };
+
+  const handleDateInputClick = () => {
+    setIsPickerOpen((prev) => !prev);
+    setView('days');
+    setSelectedMonth(value ?? new Date());
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      pickerRef.current &&
+      !pickerRef.current.contains(event.target as Node)
+    ) {
+      resetAndCloseDatePicker();
+    }
+  };
+
+  const handleCancel = () => {
+    resetAndCloseDatePicker();
+  };
+
+  const resetAndCloseDatePicker = () => {
+    setIsPickerOpen(false); // Close the picker if the click was outside
+    setView('days'); // Return to default day view on close of day picker
+    setSelectedMonth(value ?? new Date());
+  };
+
+  useEffect(() => {
+    if (isPickerOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside); // Clean up the event listener
+    };
+  }, [isPickerOpen]);
+
+  const months = Array.from({ length: 12 }, (_, i) =>
+    new Date(0, i).toLocaleString('default', { month: 'long' })
+  );
+  const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+
+  const handleMonthClick = () => setView('months');
+  const handleYearClick = () => setView('years');
+
+  const handleMonthSelect = (monthIndex: number) => {
+    const newDate = new Date(selectedMonth || '');
+    newDate.setMonth(monthIndex);
+    setSelectedMonth(newDate);
+    setView('days');
+  };
+
+  const handleYearSelect = (year: number) => {
+    const newDate = new Date(selectedMonth || '');
+    newDate.setFullYear(year);
+    setSelectedMonth(newDate);
+    setView('days');
+  };
+
+  const handleNextClick = () => {
+    if (view === 'years') {
+      setStartYear((prev) => prev + 12);
+    }
+  };
+
+  const handlePrevClick = () => {
+    if (view === 'years') {
+      setStartYear((prev) => prev - 12);
+    }
+  };
+
+  const isDisabledDate = (
+    year: number | null,
+    month: number | null,
+    minDate?: Date,
+    maxDate?: Date
+  ): boolean => {
+    const isMinDateValid = minDate instanceof Date && !isNaN(minDate.getTime());
+    const isMaxDateValid = maxDate instanceof Date && !isNaN(maxDate.getTime());
+
+    if (isMinDateValid) {
+      if (year !== null && year < minDate.getFullYear()) return true;
+      if (
+        year !== null &&
+        month !== null &&
+        year === minDate.getFullYear() &&
+        month < minDate.getMonth()
+      )
+        return true;
+    }
+
+    if (isMaxDateValid) {
+      if (year !== null && year > maxDate.getFullYear()) return true;
+      if (
+        year !== null &&
+        month !== null &&
+        year === maxDate.getFullYear() &&
+        month > maxDate.getMonth()
+      )
+        return true;
+    }
+
+    return false;
+  };
+
+  useEffect(() => {
+    if (isPickerOpen && view === 'years') {
+      const currentYear =
+        selectedMonth?.getFullYear() ?? new Date().getFullYear();
+      setStartYear(currentYear - (currentYear % 12)); // Reset to the first year in the range that contains the selected year
+    }
+  }, [isPickerOpen, selectedMonth, view]);
+
+  // Custom Caption Component
+  const CustomCaption: React.FC<CustomCaptionProps> = ({ children }) => {
+    // If children is a React node (like an element), render it directly
+    if (React.isValidElement(children)) {
+      return <div>{children}</div>;
+    }
+
+    const [month = '', year = ''] = String(children).split(' ');
+
+    return (
+      <Typography
+        as="div"
+        fontWeight="medium"
+        lineHeight="16.8px"
+        className="ff-calendar-haeder"
+      >
+        <span onClick={handleMonthClick} className="ff-cursor-pointer">
+          {month}
+        </span>
+        <span onClick={handleYearClick} className="ff-cursor-pointer">
+          {year}
+        </span>
+      </Typography>
+    );
+  };
+
+  // Custom MonthGrid Component
+  const CustomMonthGrid: React.FC = () => {
+    return (
+      <div className="ff-custom-month_grid">
+        {months.map((month: string, index: number) => {
+          const isDisabled = isDisabledDate(
+            selectedMonth?.getFullYear() || null,
+            index,
+            minDate,
+            maxDate
+          );
+
+          return (
+            <div
+              key={index}
+              onClick={() => !isDisabled && handleMonthSelect(index)}
+              className={classNames('ff-custom-month', {
+                'ff-custom-month--selected':
+                  index === selectedMonth?.getMonth(),
+                'ff-custom-month--disabled': isDisabled,
+              })}
+            >
+              <Typography>{month}</Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const CustomPrevButton: React.FC<CustomCalenderButtonProps> = ({
+    disabled,
+    onClick,
+  }) => {
+    return (
+      <button
+        className="ff-calendar-nav-button"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <Icon name="left_arrow_icon" height={20} width={20} />
+      </button>
+    );
+  };
+  const CustomNextButton: React.FC<CustomCalenderButtonProps> = ({
+    disabled,
+    onClick,
+  }) => {
+    return (
+      <button
+        className="ff-calendar-nav-button"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <Icon name="right_arrow_icon" height={20} width={20} />
+      </button>
+    );
+  };
+
+  // Custom YearGrid Component
+  const CustomYearGrid: React.FC = () => {
+    return (
+      <div className="ff-custom-year_grid">
+        {years.map((year: number) => {
+          const isDisabled = isDisabledDate(year, null, minDate, maxDate);
+
+          return (
+            <div
+              key={year}
+              onClick={() => !isDisabled && handleYearSelect(year)}
+              className={classNames('ff-custom-year', {
+                'ff-custom-year--selected':
+                  year === selectedMonth?.getFullYear(),
+                'ff-custom-year--disabled': isDisabled,
+              })}
+            >
+              <Typography>{year}</Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={`ff-date-picker ${className}`} ref={containerRef}>
+      <div className="ff-datepicker-input-container">
+        <div className="ff-input-with-icon ff-date-input-field">
+          <Icon
+            name={'calendar_icon'}
+            hoverEffect={false}
+            className="ff-calendar-icon"
+          />
+          <input
+            type="text"
+            value={value ? formatInTimeZone(value, timezone, dateFormat) : ''}
+            readOnly
+            placeholder={placeholder}
+            className="ff-date-input"
+            disabled={disabled}
+            onClick={handleDateInputClick}
+          />
+          {helperText && error && (
+            <span
+              className={classNames('ff-date-input-message', {
+                'ff-date-input-message--danger': !!error,
+              })}
+            >
+              {helperText}
+            </span>
+          )}
+        </div>
+
+        {!dateOnly && (
+          <div className="ff-input-with-icon ff-time-input-field">
+            <Icon
+              name={'clock_icon'}
+              hoverEffect={false}
+              className="ff-clock-icon"
+            />
+            <input
+              type="text"
+              placeholder="Select time"
+              className="ff-time-input"
+              value={value ? formatInTimeZone(value, timezone, timeFormat) : ''}
+              disabled={disabled}
+              onClick={handleDateInputClick}
+              readOnly
+            />
+          </div>
+        )}
+      </div>
+
+      {isPickerOpen && (
+        <div
+          className="ff-date-picker-container"
+          ref={pickerRef}
+          style={{
+            zIndex,
+          }}
+        >
+          <div className="ff-calendar-container">
+            <DayPicker
+              style={calendarStyle}
+              className="ff-calendar"
+              mode="single"
+              selected={selectedDate}
+              onSelect={handleDaySelect}
+              month={selectedMonth}
+              onMonthChange={(month) => {
+                if (view === 'days') {
+                  setSelectedMonth(month);
+                }
+              }}
+              onNextClick={handleNextClick}
+              onPrevClick={handlePrevClick}
+              disableNavigation={view === 'months'}
+              disabled={[
+                {
+                  before: new Date(minDate ? minDate : ''),
+                  after: new Date(maxDate ? maxDate : ''),
+                },
+              ]}
+              timeZone={timezone}
+              components={{
+                CaptionLabel: (props) => <CustomCaption {...props} />,
+                PreviousMonthButton: (props) => <CustomPrevButton {...props} />,
+                NextMonthButton: (props) => <CustomNextButton {...props} />,
+                ...(view === 'months'
+                  ? {
+                      MonthGrid: () => <CustomMonthGrid />,
+                    }
+                  : {}),
+                ...(view === 'years'
+                  ? {
+                      MonthGrid: () => <CustomYearGrid />,
+                    }
+                  : {}),
+              }}
+            />
+            {!dateOnly && (
+              <TimePicker
+                value={timeValue}
+                onChange={handleTimeChange}
+                minTime={minTime}
+                maxTime={maxTime}
+                onErrorChange={setTimeError}
+              />
+            )}
+          </div>
+          {!dateOnly && (
+            <div className="ff-date-picker-controls">
+              <Button
+                className="ff-date-picker-button"
+                variant="secondary"
+                onClick={handleCancel}
+                label="Cancel"
+              />
+              <Button
+                className="ff-date-picker-button"
+                variant="primary"
+                onClick={handleSave}
+                label="Save"
+                disabled={timeError}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomDatePicker;