Allow disabling of specific dates in Date Picker

[melohagan]

Describe the feature request
As a user, I want to specify a list of dates that should be disabled in the date picker.
Related discussion: #8402

https://flatpickr.js.org/examples/#disabling-specific-dates

[stale]

This issue has been automatically marked as stale because it has not had recent activity.

[daanvdberg12]

Is this feature still on the roadmap?

[melohagan]

Hey @daanvdberg12 at some stage we are going to replace the current date picker component, but there is no timeline on this for now.

Closing in favour of: #11894

[Gtchik]

Hey,

I really needed this feature in my project, and since it isn't currently supported natively, I came up with a workaround inspired by the discussion mentioned here #6839

Admittedly, the solution is not the cleanest, but it gets the job done for my use case. Here's the code I integrated into an embed block:

<img style="display: none;" src onerror="
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initializeObserver();
  } else {
    document.addEventListener('DOMContentLoaded', initializeObserver);
  }

  function initializeObserver() {
    const targetDates = ['Friday, December 13, 2024', 'Tuesday, December 17, 2024'];  // List of dates to disable

    const observer = new MutationObserver(() => {
      // Detect DOM mutations and reapply disabled dates
      resetDisabledDates();
      disableDates(targetDates);
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true, // Observe child elements as well
    });

    // Apply disabled dates on initial load
    resetDisabledDates();
    disableDates(targetDates);
  }

  function disableDates(targetDates) {
    targetDates.forEach((targetTitle) => {
      const cells = document.querySelectorAll(`td[title='${targetTitle}']`);

      cells.forEach((cell) => {
        if (!cell.classList.contains('disabled-date')) {
          // Disable the cell by adding a custom class and styles
          cell.classList.add('disabled-date');
          cell.setAttribute('aria-disabled', 'true');
          cell.style.opacity = '0.5';  // Make the cell visually faded
          cell.style.pointerEvents = 'none';  // Disable user interactions

          // Strike through the date text
          const dateSpan = cell.querySelector('.spectrum-Calendar-date');
          if (dateSpan) {
            dateSpan.style.textDecoration = 'line-through';
          }
        }
      });
    });
  }

  function resetDisabledDates() {
    // Reset all previously disabled cells by removing styles and attributes
    const disabledCells = document.querySelectorAll('td.disabled-date');
    disabledCells.forEach((cell) => {
      // Reactivate the cell by removing custom styles and attributes
      cell.classList.remove('disabled-date');
      cell.removeAttribute('aria-disabled');
      cell.style.opacity = '';  // Remove the opacity
      cell.style.pointerEvents = '';  // Reactivate user interactions

      // Remove the strike-through text decoration
      const dateSpan = cell.querySelector('.spectrum-Calendar-date');
      if (dateSpan) {
        dateSpan.style.textDecoration = '';
      }
    });
  }
">

This script listens for DOM changes, locates cells with specific date titles, and applies a "disabled" effect to those cells. The key steps are:

• Cloning the cell to remove existing event listeners.
• Disabling user interactions and visually dimming the cell.
• Adding a strikethrough effect to indicate the cell's state.

I hope this helps anyone else facing a similar issue. Feedback is welcome if there's a better way to achieve this!