Merge pull request #102 from mitri-dvp/main

feat: add disabled dates list or callback prop
farhoudshapouran · Sep 15, 2024 · f2e47fb · f2e47fb
2 parents be9df59 + 1611e98
commit f2e47fb
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -59,16 +59,17 @@ For more, take a look at the `/example` directory.
 
 ## Calendar props
 
-| Name            | Type       | Default       | Description                                                              |
-| --------------- | ---------- | ------------- | ------------------------------------------------------------------------ |
-| mode            | `string`   | `'single'`    | Defines the DatePicker mode `['single', 'range', 'multiple']`            |
-| locale          | `string`   | `'en'`        | Defines the DatePicker locale                                            |
-| minDate         | `DateType` | `null`        | Defines DatePicker minimum selectable date                               |
-| maxDate         | `DateType` | `null`        | Defines DatePicker maximum selectable date                               |
-| firstDayOfWeek  | `number`   | `0`           | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday   |
-| displayFullDays | `boolean`  | `false`       | Defines show previous and next month's days in the current calendar view |
-| initialView     | `string`   | `'day'`       | Defines the DatePicker initial view `['day', 'month', 'year', 'time']`   |
-| height          | `number`   | `'undefined'` | Defines the Calendar view heights                                        |
+| Name            | Type                       | Default                               | Description                                                                                  |
+| --------------- | -------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
+| mode            | `string`                   | `'single'`                            | Defines the DatePicker mode `['single', 'range', 'multiple']`                                |
+| locale          | `string`                   | `'en'`                                | Defines the DatePicker locale                                                                |
+| minDate         | `DateType`                 | `null`                                | Defines DatePicker minimum selectable date                                                   |
+| maxDate         | `DateType`                 | `null`                                | Defines DatePicker maximum selectable date                                                   |
+| disabledDates   | `DateType[]` or `Function` | `[]` or `(date: DateType) => boolean` | Defines DatePicker array of disabled dates, or a function that returns true for a given date |
+| firstDayOfWeek  | `number`                   | `0`                                   | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday                       |
+| displayFullDays | `boolean`                  | `false`                               | Defines show previous and next month's days in the current calendar view                     |
+| initialView     | `string`                   | `'day'`                               | Defines the DatePicker initial view `['day', 'month', 'year', 'time']`                       |
+| height          | `number`                   | `'undefined'`                         | Defines the Calendar view heights                                                            |
 
 <p align="center">
 <img src="/.github/images/modes-screenshot.png" />

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -192,6 +192,8 @@ export default function App() {
               dates={dates}
               //minDate={dayjs().startOf('day')}
               //maxDate={dayjs().add(3, 'day').endOf('day')}
+              //disabledDates={[dayjs(), dayjs().add(1, 'day')]}
+              //disabledDates={(date) => [0, 6].includes(dayjs(date).day())}// disable weekends
               //firstDayOfWeek={1}
               displayFullDays
               timePicker={timePicker}

diff --git a/src/DateTimePicker.tsx b/src/DateTimePicker.tsx
@@ -73,6 +73,7 @@ const DateTimePicker = (
     // endYear,
     minDate,
     maxDate,
+    disabledDates,
     date,
     startDate,
     endDate,
@@ -298,6 +299,7 @@ const DateTimePicker = (
         timePicker,
         minDate,
         maxDate,
+        disabledDates,
         firstDayOfWeek: firstDay,
         height,
         theme: rest,

diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx
@@ -26,6 +26,7 @@ const DaySelector = () => {
     displayFullDays,
     minDate,
     maxDate,
+    disabledDates,
     firstDayOfWeek,
     theme,
     height,
@@ -48,6 +49,7 @@ const DaySelector = () => {
         displayFullDays,
         minDate,
         maxDate,
+        disabledDates,
         firstDayOfWeek
       ).map((day, index) => {
         if (day) {
@@ -157,6 +159,7 @@ const DaySelector = () => {
       firstDayOfWeek,
       minDate,
       maxDate,
+      disabledDates,
       date,
       startDate,
       endDate,

diff --git a/src/types.ts b/src/types.ts
@@ -86,6 +86,7 @@ export interface DatePickerBaseProps {
   endYear?: number;
   minDate?: DateType;
   maxDate?: DateType;
+  disabledDates?: DateType[] | ((date: DateType) => boolean);
   firstDayOfWeek?: number;
   displayFullDays?: boolean;
   timePicker?: boolean;

diff --git a/src/utils.ts b/src/utils.ts
@@ -61,6 +61,35 @@ export function isDateBetween(
   return dayjs(date) <= endDate && dayjs(date) >= startDate;
 }
 
+export function isDateDisabled(
+  date: dayjs.Dayjs,
+  {
+    minDate,
+    maxDate,
+    disabledDates,
+  }: {
+    minDate?: DateType;
+    maxDate?: DateType;
+    disabledDates?: DateType[] | ((date: DateType) => boolean) | undefined;
+  }
+): boolean {
+  if (minDate && date < getDate(minDate)) return true;
+  if (maxDate && date > getDate(maxDate)) return true;
+
+  if (disabledDates) {
+    if (Array.isArray(disabledDates)) {
+      const isDisabled = disabledDates.some((disabledDate) =>
+        areDatesOnSameDay(date, disabledDate)
+      );
+      return isDisabled;
+    } else if (disabledDates instanceof Function) {
+      return disabledDates(date);
+    }
+  }
+
+  return false;
+}
+
 export const getFormatedDate = (date: DateType, format: string) =>
   dayjs(date).format(format);
 
@@ -149,6 +178,7 @@ export const getParsedDate = (date: DateType) => {
  * @param displayFullDays
  * @param minDate - min selectable date
  * @param maxDate - max selectable date
+ * @param disabledDates - array of disabled dates, or a function that returns true for a given date
  * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
  *
  * @returns days array based on current date
@@ -158,6 +188,7 @@ export const getMonthDays = (
   displayFullDays: boolean,
   minDate: DateType,
   maxDate: DateType,
+  disabledDates: DateType[] | ((date: DateType) => boolean) | undefined,
   firstDayOfWeek: number
 ): IDayObject[] => {
   const date = getDate(datetime);
@@ -177,6 +208,7 @@ export const getMonthDays = (
           thisDay,
           minDate,
           maxDate,
+          disabledDates,
           false,
           index + 1
         );
@@ -191,6 +223,7 @@ export const getMonthDays = (
       thisDay,
       minDate,
       maxDate,
+      disabledDates,
       true,
       prevMonthOffset + day
     );
@@ -204,6 +237,7 @@ export const getMonthDays = (
       thisDay,
       minDate,
       maxDate,
+      disabledDates,
       false,
       daysInCurrentMonth + prevMonthOffset + day
     );
@@ -219,6 +253,7 @@ export const getMonthDays = (
  * @param date - calculated date based on day, month, and year
  * @param minDate - min selectable date
  * @param maxDate - max selectable date
+ * @param disabledDates - array of disabled dates, or a function that returns true for a given date
  * @param isCurrentMonth - define the day is in the current month
  *
  * @returns days object based on current date
@@ -228,21 +263,15 @@ const generateDayObject = (
   date: dayjs.Dayjs,
   minDate: DateType,
   maxDate: DateType,
+  disabledDates: DateType[] | ((date: DateType) => boolean) | undefined,
   isCurrentMonth: boolean,
   dayOfMonth: number
 ) => {
-  let disabled = false;
-  if (minDate) {
-    disabled = date < getDate(minDate);
-  }
-  if (maxDate && !disabled) {
-    disabled = date > getDate(maxDate);
-  }
   return {
     text: day.toString(),
     day: day,
     date: getFormatedDate(date, DATE_FORMAT),
-    disabled,
+    disabled: isDateDisabled(date, { minDate, maxDate, disabledDates }),
     isCurrentMonth,
     dayOfMonth,
   };