Блог

У меня есть следующее App.js …

 import React, { useState } from "react";
import "./styles.css";
import moment from 'moment';

export default function App() {
  const [dateRange, setDateRange] = useState({startDate: moment().startOf('week').format('YYYY-MM-DD'), endDate: moment().startOf('week').format('YYYY-MM-DD')})

  const handleDateValueChange = (ev) => {
    setDateRange({...this.props.dateRange, [ev.target.name]: moment(ev.target.value).format('YYYY-MM-DD')});
  }
  return (
    <div className="App">
      <input type="date" name="startDate" onChange={ev => handleDateValueChange(ev)} value={dateRange.startDate} />
      <input type="date" name="endDate" onChange={ev => handleDateValueChange(ev)} value={dateRange.endDate} />
    </div>
  );
}
 

Вы также можете просмотреть фрагмент кода здесь: https://codesandbox.io/s/date-moment-disable-days-ys3u1

Мне нужно, чтобы все дни, кроме понедельника, не выбирались (выделены серым цветом). У кого-нибудь есть идеи, как это сделать в фрагменте react?

Редактировать: я добавил компонент полного кода и codesandbox

Вы не можете выполнить это с помощью HTML5.

Проверьте reactdatepicker

Вот пример, который позволяет выбирать только понедельники:

 <DatePicker
    selected={startDate}
    onChange={date => setStartDate(date)}
    filterDate={date => getDay(date) === 1}
    placeholderText="Select a Monday"
/>
 

Обновленная версия из вашей изолированной среды с использованием moment и react-datepicker:

 const [dateRange, setDateRange] = useState({
    startDate: new Date(moment().startOf("isoweek").utc()),
    endDate: new Date(moment().endOf("week").utc())
});

<DatePicker
      selected={new Date(dateRange.startDate)}
      onChange={(date) => setDateRange({ ...dateRange, startDate: date })}
      name="startDate"
      filterDate={(date) => date.getDay() === 1}
      placeholderText="Select a Monday"
    />