如何禁用 HTML 输入中选择日期的任何一天？

Question

我在 React 中有一个页面，我使用浏览器输入。如何阻止我在相关输入中指定的任何日历日？

<input type="date" id="start" name="trip-start" value="2018-07-22"/>

我需要阻止用户在我指定的特殊日子做出选择。

我知道calendar受到min-max等值的限制，但我想要的不是禁用日期范围内的日期。我想禁用并阻止直接从日历中的任何一天或一年选择日期。

Answer 1

我认为你可以通过状态和事件处理程序来处理这种行为。

import React, { useState } from 'react';

const DateInput = () => {
  const [selectedDate, setSelectedDate] = useState('');

  // Specify the list of disabled dates
  const disabledDates = ['2022-12-25', '2023-01-01'];

  const handleDateChange = (event) => {
    const selectedValue = event.target.value;
    
    // Check if the selected date is not in the list of disabled dates
    if (!disabledDates.includes(selectedValue)) {
      setSelectedDate(selectedValue);
    }
  };

  return (
    <div>
      <label htmlFor="start">Select a date:</label>
      <input
        type="date"
        id="start"
        name="trip-start"
        value={selectedDate}
        onChange={handleDateChange}
        min="2022-01-01"
        max="2023-12-31"
      />
    </div>
  );
};

export default DateInput;