feat(Calendar, DatePicker, DateRangePicker): allows custom functions to be passed to the disabledDates option to disable specific dates

mrholek · mrholek · commit 4b28c6ddeff5 · 2024-11-21T20:34:47.000+01:00
diff --git a/docs/assets/js/snippets.js b/docs/assets/js/snippets.js
@@ -228,7 +228,6 @@
   const myCalendarDisabledDates = document.getElementById('myCalendarDisabledDates')
   if (myCalendarDisabledDates) {
     const optionsCalendarDisabledDates = {
-      locale: 'en-US',
       calendarDate: new Date(2022, 2, 1),
       calendars: 2,
       disabledDates: [
@@ -237,6 +236,7 @@
         new Date(2022, 3, 16),
         [new Date(2022, 4, 2), new Date(2022, 4, 8)]
       ],
+      locale: 'en-US',
       maxDate: new Date(2022, 5, 0),
       minDate: new Date(2022, 1, 1)
     }
@@ -245,6 +245,49 @@
   }
   // js-docs-end calendar-disabled-dates
 
+  // js-docs-start calendar-disabled-dates2
+  const myCalendarDisabledDates2 = document.getElementById('myCalendarDisabledDates2')
+  if (myCalendarDisabledDates2) {
+    const disableWeekends = date => {
+      const day = date.getDay()
+      return day === 0 || day === 6
+    }
+
+    const optionsCalendarDisabledDates2 = {
+      calendars: 2,
+      disabledDates: disableWeekends,
+      locale: 'en-US'
+    }
+
+    new coreui.Calendar(myCalendarDisabledDates2, optionsCalendarDisabledDates2)
+  }
+  // js-docs-end calendar-disabled-dates2
+
+  // js-docs-start calendar-disabled-dates3
+  const myCalendarDisabledDates3 = document.getElementById('myCalendarDisabledDates3')
+  if (myCalendarDisabledDates3) {
+    const disableWeekends = date => {
+      const day = date.getDay()
+      return day === 0 || day === 6
+    }
+
+    const specificDates = [
+      new Date(2024, 10, 25),
+      new Date(2024, 11, 4),
+      new Date(2024, 11, 12)
+    ]
+
+    const optionsCalendarDisabledDates3 = {
+      calendarDate: new Date(2024, 10, 1),
+      calendars: 2,
+      disabledDates: [disableWeekends, ...specificDates],
+      locale: 'en-US'
+    }
+
+    new coreui.Calendar(myCalendarDisabledDates3, optionsCalendarDisabledDates3)
+  }
+  // js-docs-end calendar-disabled-dates3
+
   // -------------------------------
   // Date Pickers
   // -------------------------------
@@ -270,6 +313,23 @@
   }
   // js-docs-end date-picker-disabled-dates
 
+  // js-docs-start date-picker-disabled-dates2
+  const myDatePickerDisabledDates2 = document.getElementById('myDatePickerDisabledDates2')
+  if (myDatePickerDisabledDates2) {
+    const disableWeekends = date => {
+      const day = date.getDay()
+      return day === 0 || day === 6
+    }
+
+    const optionsDatePickerDisabledDates2 = {
+      disabledDates: disableWeekends,
+      locale: 'en-US'
+    }
+
+    new coreui.DateRangePicker(document.getElementById('myDatePickerDisabledDates2'), optionsDatePickerDisabledDates2)
+  }
+  // js-docs-end date-picker-disabled-dates2
+
   // js-docs-start date-picker-custom-formats1
   const myDatePickerCustomFormats1 = document.getElementById('myDatePickerCustomFormats1')
   if (myDatePickerCustomFormats1) {
@@ -326,6 +386,23 @@
   }
   // js-docs-end date-range-picker-disabled-dates
 
+  // js-docs-start date-range-picker-disabled-dates2
+  const myDateRangePickerDisabledDates2 = document.getElementById('myDateRangePickerDisabledDates2')
+  if (myDateRangePickerDisabledDates2) {
+    const disableWeekends = date => {
+      const day = date.getDay()
+      return day === 0 || day === 6
+    }
+
+    const optionsDateRangePickerDisabledDates2 = {
+      disabledDates: disableWeekends,
+      locale: 'en-US'
+    }
+
+    new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates2'), optionsDateRangePickerDisabledDates2)
+  }
+  // js-docs-end date-range-picker-disabled-dates2
+
   // js-docs-start date-range-picker-custom-formats1
   const myDateRangePickerCustomFormats1 = document.getElementById('myDateRangePickerCustomFormats1')
   if (myDateRangePickerCustomFormats1) {
diff --git a/docs/content/components/calendar.md b/docs/content/components/calendar.md
@@ -112,7 +112,13 @@ Enable range selection by adding `data-coreui-range="true"` to allow users to pi
 
 ## Disabled dates
 
-The Bootstrap Calendar component includes functionality to disable specific dates, such as weekends or holidays, using the `disabledDates` option. This option takes an array and applies custom logic to determine which dates should be disabled.
+The Bootstrap Calendar component includes functionality to disable specific dates, such as weekends or holidays, using the `disabledDates` option. It accepts:
+
+- A single `Date` or an array of `Date` objects.
+- A function or an array of functions that take a `Date` object as an argument and return a boolean indicating whether the date should be disabled.
+- A mixed array of `Date` objects and functions.
+
+To disable certain dates, you can provide them in an array. For date ranges, use nested arrays, where each inner array indicates a start date and an end date for that range:
 
 {{< example >}}
 <div class="d-flex justify-content-center">
@@ -122,9 +128,44 @@ The Bootstrap Calendar component includes functionality to disable specific date
 
 {{< js-docs name="calendar-disabled-dates" file="docs/assets/js/snippets.js" >}}
 
+### Disabling weekends
+
+To disable weekends, provide a function for the `disabledDates` option. Here's the method:
+
+{{< example >}}
+<div class="d-flex justify-content-center">
+  <div id="myCalendarDisabledDates2" class="border rounded"></div>
+</div>
+{{< /example >}}
+
+{{< js-docs name="calendar-disabled-dates2" file="docs/assets/js/snippets.js" >}}
+
+In the example above:
+
+- `disableWeekends` is a function that checks if a date falls on a Saturday (`6`) or a Sunday (`0`).
+- The `disabledDates` option utilizes the `disableWeekends` function to disable all weekends in the calendar.
+
+### Combining functions and specific dates
+
+You can also combine specific dates and functions in the `disabledDates` array. For instance:
+
+{{< example >}}
+<div class="d-flex justify-content-center">
+  <div id="myCalendarDisabledDates3" class="border rounded"></div>
+</div>
+{{< /example >}}
+
+{{< js-docs name="calendar-disabled-dates3" file="docs/assets/js/snippets.js" >}}
+
+In this example:
+
+- `disableWeekends` disables weekends as before.
+- `specificDates` is an array of specific dates to disable.
+- The `disabledDates` option combines both, allowing you to disable weekends and specific dates simultaneously.
+
 ## Non-english locale
 
-The CoreUI React Calendar allows users to display dates in non-English locales, making it suitable for international applications.
+The CoreUI Bootstrap Calendar allows users to display dates in non-English locales, making it suitable for international applications.
 
 ### Auto
 
@@ -138,7 +179,7 @@ By default, the Calendar component uses the browser's default locale. However, y
 
 ### Chinese
 
-Here is an example of the React Calendar component with Chinese locale settings.
+Here is an example of the Bootstrap Calendar component with Chinese locale settings.
 
 {{< example >}}
 <div class="d-flex justify-content-center">
@@ -182,7 +223,7 @@ Example of the Calendar component with RTL support, using the Hebrew locale.
 
 ### Persian
 
-Example of the React Calendar component with Persian locale settings.
+Example of the Bootstrap Calendar component with Persian locale settings.
 
 {{< example >}}
 <div class="d-flex justify-content-center">
@@ -232,7 +273,7 @@ const calendarList = calendarElementList.map(calendarEl => {
 | `ariaNavPrevYearLabel` | string | `'Previous year'` | A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function. |
 | `calendarDate` | date, number, string, null | `null` | Default date of the component. |
 | `calendars` | number | `2` | The number of calendars that render on desktop devices. |
-| `disabledDates` | array, null | `null` | Specify the list of dates that cannot be selected. |
+| `disabledDates` | array, function, null | `null` | Specify the list of dates that cannot be selected. |
 | `endDate` | date, number, string, null | `null` | Initial selected to date (range). |
 | `firstDayOfWeek` | number | `1` | <p>Sets the day of start week.</p>  <ul><li>`0` - Sunday</li><li>`1` - Monday</li><li>`2` - Tuesday</li><li>`3` - Wednesday</li><li>`4` - Thursday</li><li>`5` - Friday</li><li>`6` - Saturday</li></ul> |
 | `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |
diff --git a/docs/content/forms/date-picker.md b/docs/content/forms/date-picker.md
@@ -188,6 +188,20 @@ The CoreUI Bootstrap DatePicker component allows you to disable certain dates, s
 
 {{< js-docs name="date-picker-disabled-dates" file="docs/assets/js/snippets.js" >}}
 
+### Disabling weekends
+
+You can disable weekends by passing a function to the `disabledDates` option. Here's how to do it:
+
+{{< example >}}
+<div class="row">
+  <div class="col-lg-5">
+    <div id="myDatePickerDisabledDates2"></div>
+  </div>
+</div>
+{{< /example >}}
+
+{{< js-docs name="date-picker-disabled-dates2" file="docs/assets/js/snippets.js" >}}
+
 ## Non-english locale
 
 CoreUI Date Picker allows users to display dates and times in a non-English locale. This is useful for applications with international users or that need to support multiple languages. 
@@ -356,7 +370,7 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
 | `container` | string, element, false | `false` | Appends the dropdown to a specific element. Example: `container: 'body'`. |
 | `date` | date, number, string, null | `null` | Default value of the component |
 | `disabled` | boolean | `false` | Toggle the disabled state for the component. |
-| `disabledDates` | array | null | `null` | Specify the list of dates that cannot be selected. |
+| `disabledDates` | array, function, null | `null` | Specify the list of dates that cannot be selected. |
 | `firstDayOfWeek` | number | `1` | <p>Sets the day of start week.</p><ul><li>`0` - Sunday</li><li>`1` - Monday</li><li>`2` - Tuesday</li><li>`3` - Wednesday</li><li>`4` - Thursday</li><li>`5` - Friday</li><li>`6` - Saturday</li></ul> |
 | `footer` | boolean | `false` | Toggle visibility of footer element. |
 | `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
diff --git a/docs/content/forms/date-range-picker.md b/docs/content/forms/date-range-picker.md
@@ -218,6 +218,20 @@ The CoreUI Bootstrap DateRangePicker component allows you to disable certain dat
 
 {{< js-docs name="date-range-picker-disabled-dates" file="docs/assets/js/snippets.js" >}}
 
+### Disabling weekends
+
+You can disable weekends by passing a function to the `disabledDates` option. Here's how to do it:
+
+{{< example >}}
+<div class="row">
+  <div class="col-lg-5">
+    <div id="myDateRangePickerDisabledDates2"></div>
+  </div>
+</div>
+{{< /example >}}
+
+{{< js-docs name="date-range-picker-disabled-dates2" file="docs/assets/js/snippets.js" >}}
+
 ## Custom ranges
 
 In order to configure custom date ranges in the Date Range component, you must use the `ranges` option to define a set of predefined ranges. These ranges can include predefined options such as "Today", "Yesterday", "Last 7 Days", etc.
@@ -400,7 +414,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
 | `confirmButtonClasses` | array, string | `['btn', 'btn-sm', 'btn-primary']` | CSS class names that will be added to the confirm button |
 | `container` | string, element, false | `false` | Appends the dropdown to a specific element. Example: `container: 'body'`. |
 | `disabled` | boolean | `false` | Toggle the disabled state for the component. |
-| `disabledDates` | array, null | `null` | Specify the list of dates that cannot be selected. |
+| `disabledDates` | array, function, null | `null` | Specify the list of dates that cannot be selected. |
 | `endDate` | date, number, string, null | `null` | Initial selected to date (range). |
 | `endName` | string, null | `null` | Set the name attribute for the end date input element. |
 | `firstDayOfWeek` | number | `1` | <p>Sets the day of start week.</p>  <ul><li>`0` - Sunday</li><li>`1` - Monday</li><li>`2` - Tuesday</li><li>`3` - Wednesday</li><li>`4` - Thursday</li><li>`5` - Friday</li><li>`6` - Saturday</li></ul> |
diff --git a/docs/content/templates/admin-dashboard.md b/docs/content/templates/admin-dashboard.md
@@ -9,7 +9,7 @@ toc: true
 
 ## Bootstrap Admin & Dashboard Templates
 
-Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for React.js, and CoreUI PRO for React.js
+Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI, and CoreUI PRO.
 
 <div class="row">
   <div class="col-md-6">
diff --git a/js/src/calendar.js b/js/src/calendar.js
@@ -103,7 +103,7 @@ const DefaultType = {
   ariaNavPrevYearLabel: 'string',
   calendarDate: '(date|number|string|null)',
   calendars: 'number',
-  disabledDates: '(array|null)',
+  disabledDates: '(array|date|function|null)',
   endDate: '(date|number|string|null)',
   firstDayOfWeek: 'number',
   locale: 'string',
diff --git a/js/src/date-range-picker.js b/js/src/date-range-picker.js
@@ -136,7 +136,7 @@ const DefaultType = {
   confirmButtonClasses: '(array|string)',
   container: '(string|element|boolean)',
   date: '(date|number|string|null)',
-  disabledDates: '(array|null)',
+  disabledDates: '(array|date|function|null)',
   disabled: 'boolean',
   endDate: '(date|number|string|null)',
   endName: '(string|null)',
diff --git a/js/src/util/calendar.js b/js/src/util/calendar.js
@@ -241,15 +241,15 @@ export const getMonthDetails = (year, month, firstDayOfWeek) => {
   return weeks
 }
 
-export const isDisableDateInRange = (startDate, endDate, dates) => {
+export const isDisableDateInRange = (startDate, endDate, disabledDates) => {
   if (startDate && endDate) {
     const date = new Date(startDate)
     let disabled = false
 
     // eslint-disable-next-line no-unmodified-loop-condition
     while (date < endDate) {
       date.setDate(date.getDate() + 1)
-      if (isDateDisabled(date, null, null, dates)) {
+      if (isDateDisabled(date, null, null, disabledDates)) {
         disabled = true
         break
       }
@@ -261,29 +261,40 @@ export const isDisableDateInRange = (startDate, endDate, dates) => {
   return false
 }
 
-export const isDateDisabled = (date, min, max, dates) => {
-  let disabled
-  if (dates) {
-    for (const _date of dates) {
+export const isDateDisabled = (date, min, max, disabledDates) => {
+  if (min && date < min) {
+    return true
+  }
+
+  if (max && date > max) {
+    return true
+  }
+
+  if (typeof disabledDates === 'function') {
+    return disabledDates(date)
+  }
+
+  if (disabledDates instanceof Date && isSameDateAs(date, disabledDates)) {
+    return true
+  }
+
+  if (Array.isArray(disabledDates) && disabledDates) {
+    for (const _date of disabledDates) {
+      if (typeof _date === 'function' && _date(date)) {
+        return true
+      }
+
       if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
-        disabled = true
+        return true
       }
 
       if (_date instanceof Date && isSameDateAs(date, _date)) {
-        disabled = true
+        return true
       }
     }
   }
 
-  if (min && date < min) {
-    disabled = true
-  }
-
-  if (max && date > max) {
-    disabled = true
-  }
-
-  return disabled
+  return false
 }
 
 export const isDateInRange = (date, start, end) => {
