Как отключить выходные в компоненте Datepicker в React

Чтобы отключить выходные дни в компоненте выбора даты в React, вы можете рассмотреть следующие методы:

  1. Использование пользовательской функции проверки. Вы можете создать пользовательскую функцию проверки, которая проверяет, приходится ли выбранная дата на выходные (суббота или воскресенье), и предотвращает ее выбор.

  2. Использование библиотек дат. Библиотеки дат, такие как Moment.js или date-fns, предоставляют полезные утилиты для управления и проверки дат. Вы можете использовать эти библиотеки, чтобы проверить, является ли выбранная дата выходным, и соответствующим образом отключить ее.

  3. Стилизация CSS. Другой подход — применить стили CSS к компоненту выбора даты, чтобы визуально скрыть или отключить выходные дни. Вы можете настроить таргетинг на определенные дни, соответствующие выходным, и применить стили, чтобы сделать их недоступными для выбора или менее заметными.

Вот пример того, как можно отключить выходные с помощью специальной функции проверки в React:

import React, { useState } from 'react';
const DatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const handleDateChange = (date) => {
    // Custom validation function to disable weekends
    if (isWeekend(date)) {
      return;
    }
    setSelectedDate(date);
  };
  const isWeekend = (date) => {
    const day = date.getDay();
    return day === 0 || day === 6; // Sunday: 0, Saturday: 6
  };
  return (
    <input
      type="date"
      value={selectedDate}
      onChange={(e) => handleDateChange(new Date(e.target.value))}
    />
  );
};
export default DatePicker;