Merge pull request #251 from sinabdollahi/feat/add-reset-functionallity-and-year-month-styles

feat: add allowRangeReset prop to Range datepicker and add month and year selector Components.

Author: farhoudshapouran

src/components/header/month-button.tsx

@@ -15,6 +15,7 @@ const MonthButton = () => {
     classNames,
     disableMonthPicker,
     monthCaptionFormat,
+    components,
   } = useCalendarContext();
 
   const currentMonthText = dayjs(currentDate)
@@ -24,12 +25,25 @@ const MonthButton = () => {
     )
     .format(monthCaptionFormat === 'full' ? 'MMMM' : 'MMM');
 
+  const handlePress = () =>
+    setCalendarView(calendarView === 'month' ? 'day' : 'month');
+
+  if (components?.MonthSelector) {
+    return (
+      <>
+        {components.MonthSelector({
+          text: currentMonthText,
+          isOpen: calendarView === 'month',
+          onPress: disableMonthPicker ? () => {} : handlePress,
+        })}
+      </>
+    );
+  }
+
   return (
     <Pressable
       disabled={disableMonthPicker}
-      onPress={() =>
-        setCalendarView(calendarView === 'month' ? 'day' : 'month')
-      }
+      onPress={handlePress}
       testID="btn-month"
       accessibilityRole="button"
       accessibilityLabel={currentMonthText}

src/components/header/year-button.tsx

@@ -16,16 +16,40 @@ const YearButton = () => {
     disableYearPicker,
     calendar = 'gregory',
     numerals = 'latn',
+    components,
   } = useCalendarContext();
 
   const years = getYearRange(currentYear);
+
+  const yearText =
+    calendarView === 'year'
+      ? `${formatNumber(years[0] || 0, numerals)} - ${formatNumber(years[years.length - 1] || 0, numerals)}`
+      : formatNumber(
+          parseInt(dayjs(currentDate).calendar(calendar).format('YYYY')),
+          numerals
+        );
+
+  const handlePress = () => {
+    setCalendarView(calendarView === 'year' ? 'day' : 'year');
+    onChangeYear(getDateYear(currentDate));
+  };
+
+  if (components?.YearSelector) {
+    return (
+      <>
+        {components.YearSelector({
+          text: yearText,
+          isOpen: calendarView === 'year',
+          onPress: disableYearPicker ? () => {} : handlePress,
+        })}
+      </>
+    );
+  }
+
   return (
     <Pressable
       disabled={disableYearPicker}
-      onPress={() => {
-        setCalendarView(calendarView === 'year' ? 'day' : 'year');
-        onChangeYear(getDateYear(currentDate));
-      }}
+      onPress={handlePress}
       testID="btn-year"
       accessibilityRole="button"
       accessibilityLabel={dayjs(currentDate).calendar(calendar).format('YYYY')}
@@ -38,12 +62,7 @@ const YearButton = () => {
           style={styles?.year_selector_label}
           className={classNames?.year_selector_label}
         >
-          {calendarView === 'year'
-            ? `${formatNumber(years[0] || 0, numerals)} - ${formatNumber(years[years.length - 1] || 0, numerals)}`
-            : formatNumber(
-                parseInt(dayjs(currentDate).calendar(calendar).format('YYYY')),
-                numerals
-              )}
+          {yearText}
         </Text>
       </View>
     </Pressable>

src/datetime-picker.tsx

@@ -60,6 +60,13 @@ export interface DatePickerRangeProps extends DatePickerBaseProps {
   startDate?: DateType;
   endDate?: DateType;
   onChange?: RangeChange;
+  /**
+   * When `true`, tapping any date while a complete range (both startDate and
+   * endDate) is selected will clear the endDate and begin a fresh selection
+   * with the tapped date as the new startDate, regardless of whether the
+   * tapped day falls inside the range, on the start, or on the end.
+   */
+  allowRangeReset?: boolean;
 }
 
 export interface DatePickerMultipleProps extends DatePickerBaseProps {
@@ -117,6 +124,11 @@ const DateTimePicker = (
     use12Hours,
   } = props;
 
+  const allowRangeReset =
+    mode === 'range'
+      ? (props as DatePickerRangeProps).allowRangeReset
+      : undefined;
+
   dayjs.tz.setDefault(timeZone);
   dayjs.calendar(calendar);
   dayjs.locale(locale);
@@ -385,6 +397,7 @@ const DateTimePicker = (
     prevTimezone,
     timeZone,
     calendar,
+    onChange,
   ]);
 
   const setCalendarView = useCallback((view: CalendarViews) => {
@@ -412,6 +425,15 @@ const DateTimePicker = (
           let start = removeTime(stateRef.current.startDate, timeZone);
           let end = removeTime(stateRef.current.endDate, timeZone);
           const selected = removeTime(selectedDate, timeZone);
+
+          if (allowRangeReset && start && end) {
+            (onChange as RangeChange)({
+              startDate: dayjs(selected).toDate(),
+              endDate: undefined,
+            });
+            return;
+          }
+
           let isStart: boolean = true;
           let isReset: boolean = false;
 

src/index.ts

@@ -10,6 +10,8 @@ export type {
   CalendarMonth,
   CalendarYear,
   CalendarComponents,
+  CalendarMonthSelectorProps,
+  CalendarYearSelectorProps,
   DatePickerBaseProps,
 } from './types';
 export { useDefaultClassNames, useDefaultStyles } from './theme';

src/types.ts

@@ -116,6 +116,24 @@ export type Styles = Partial<{
     | CalenderFlag]: ViewStyle | TextStyle | ImageStyle;
 }>;
 
+export type CalendarMonthSelectorProps = {
+  /** The formatted month name shown in the header (e.g. "January" or "فروردین") */
+  text: string;
+  /** Whether the month-picker view is currently open */
+  isOpen: boolean;
+  /** Toggles the month-picker view */
+  onPress: () => void;
+};
+
+export type CalendarYearSelectorProps = {
+  /** The formatted year or year-range shown in the header (e.g. "2025" or "2024 - 2035") */
+  text: string;
+  /** Whether the year-picker view is currently open */
+  isOpen: boolean;
+  /** Toggles the year-picker view */
+  onPress: () => void;
+};
+
 export type CalendarComponents = Partial<{
   /** The component containing the day in the days grid */
   Day: (day: CalendarDay) => React.ReactNode;
@@ -129,6 +147,10 @@ export type CalendarComponents = Partial<{
   IconPrev: React.ReactNode;
   /** The next month button/year icon in the header */
   IconNext: React.ReactNode;
+  /** Fully replaces the month selector button in the header */
+  MonthSelector: (props: CalendarMonthSelectorProps) => React.ReactNode;
+  /** Fully replaces the year selector button in the header */
+  YearSelector: (props: CalendarYearSelectorProps) => React.ReactNode;
 }>;
 
 export interface DatePickerBaseProps {