Чтобы отключить выходные дни в компоненте выбора даты в React, вы можете рассмотреть следующие методы:
-
Использование пользовательской функции проверки. Вы можете создать пользовательскую функцию проверки, которая проверяет, приходится ли выбранная дата на выходные (суббота или воскресенье), и предотвращает ее выбор.
-
Использование библиотек дат. Библиотеки дат, такие как Moment.js или date-fns, предоставляют полезные утилиты для управления и проверки дат. Вы можете использовать эти библиотеки, чтобы проверить, является ли выбранная дата выходным, и соответствующим образом отключить ее.
-
Стилизация 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;