feat: add disabled dates list or callback prop

Author: mitri-dvp

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}

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,

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) {
@@ -156,6 +158,7 @@ const DaySelector = () => {
       firstDayOfWeek,
       minDate,
       maxDate,
+      disabledDates,
       date,
       startDate,
       endDate,

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;

src/utils.ts

@@ -149,6 +149,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 +159,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 +179,7 @@ export const getMonthDays = (
           thisDay,
           minDate,
           maxDate,
+          disabledDates,
           false,
           index + 1
         );
@@ -191,6 +194,7 @@ export const getMonthDays = (
       thisDay,
       minDate,
       maxDate,
+      disabledDates,
       true,
       prevMonthOffset + day
     );
@@ -204,6 +208,7 @@ export const getMonthDays = (
       thisDay,
       minDate,
       maxDate,
+      disabledDates,
       false,
       daysInCurrentMonth + prevMonthOffset + day
     );
@@ -219,6 +224,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,6 +234,7 @@ const generateDayObject = (
   date: dayjs.Dayjs,
   minDate: DateType,
   maxDate: DateType,
+  disabledDates: DateType[] | ((date: DateType) => boolean) | undefined,
   isCurrentMonth: boolean,
   dayOfMonth: number
 ) => {
@@ -238,6 +245,16 @@ const generateDayObject = (
   if (maxDate && !disabled) {
     disabled = date > getDate(maxDate);
   }
+  if (disabledDates) {
+    if (Array.isArray(disabledDates)) {
+      const dates = disabledDates.filter((disabledDate) =>
+        areDatesOnSameDay(date, disabledDate)
+      );
+      disabled = dates.length > 0;
+    } else if (disabledDates instanceof Function) {
+      disabled = disabledDates(date);
+    }
+  }
   return {
     text: day.toString(),
     day: day,