Link 日期选择器中的年月日输入字段

Question

我正在尝试按照此文档为我的 React 应用程序自定义 React Datepicker - https://reactdatepicker.com/

我有 3 个输入字段用于选择日期 - 年、月和日。现在我需要 link 这些字段来确保如果用户选择二月，日字段应显示 28 天，如果用户在年字段中选择闰年，日字段应显示 29 天。

我有以下输入字段代码：

const year = 2022; 
const month = 2; 
const date = 24;

const [myMonth, setMyMonth] = useState(new Date()); 
const [myYear, setMyYear] = useState(new Date()); 
const [myDay, setMyDay] = useState(new Date(year, month, date));

const minDate = new Date(year, month, 1); 
const maxDate = new Date(year, month + 1 , 0);

return ( 
    <div className="container"> 
       <div className="input-container"> 
         <div> 
           <label>Year</label> 
           <DatePicker 
             selected={myYear} 
             onChange={(date) => setMyYear(date)} 
             showYearPicker dateFormat="yyyy" 
           /> 
        </div> 
        <div> 
        <label>Month</label> 
        <DatePicker 
          showMonthYearPicker 
          dateFormat = "MMMM" 
          renderCustomHeader = {({date}) => (<div></div>)} 
          selected = {myMonth} 
          onChange = {(date) => setMyMonth(date)} 
        /> 
      </div> 
      <div> 
        <label>Day</label> 
        <DatePicker 
          dateFormat = "dd" 
          renderCustomHeader = {({date}) => (<div></div>)} 
          selected = {myDay} 
          minDate = {minDate} 
          maxDate = {maxDate} 
          onChange = {(date) => setMyDay(date)} 
        /> 
     </div>
);

谁能告诉我如何 link 这 3 个字段，以便用户可以始终如一地 select 来自上述日期选择器的日期？

Answer 1

您可以使用以下代码来实现此目的。注意：必须导入并使用react

的useEffect hook

  const currentDate = new Date();

  const [myMonth, setMyMonth] = useState(currentDate);
  const [myYear, setMyYear] = useState(currentDate);
  const [myDay, setMyDay] = useState(currentDate);

  const minDate = new Date(myYear.getFullYear(), myMonth.getMonth(), 1);
  const maxDate = new Date(myYear.getFullYear(), myMonth.getMonth() + 1, 0);

  useEffect(() => {
    setMyDay(new Date(myYear.getFullYear(), myMonth.getMonth(), 1));
  }, [myMonth, myYear, setMyDay]);

  const renderDayContents = (day, date) => {
    if (date < minDate || date > maxDate) {
      return <span></span>;
    }
    return <span>{date.getDate()}</span>;
  };

  return (
    <div>
      <div className="container">
        <div className="input-container">
          <div>
            <label>Year</label>
            <DatePicker
              selected={myYear}
              onChange={(date) => setMyYear(date)}
              showYearPicker
              dateFormat="yyyy"
            />
          </div>
        </div>
        <label>Month</label>
        <DatePicker
          showMonthYearPicker
          dateFormat="MMMM"
          renderCustomHeader={({ date }) => <div></div>}
          selected={myMonth}
          onChange={(date) => setMyMonth(date)}
        />
      </div>
      <div>
        <label>Day</label>
        <DatePicker
          dateFormat="dd"
          renderCustomHeader={({ date }) => <div></div>}
          selected={myDay}
          renderDayContents={renderDayContents}
          onChange={(date) => setMyDay(date)}
        />
      </div>
    </div>
  );

解释：

如果我们想在其他事情发生变化的情况下改变某些事情，我们必须使用 userEffect 反应钩子。这里我们是更改日期可以选择一次年月更改
我们正在使用 renderDayContents 属性 of DatePicker 来动态填充可以根据年和月的选择来选择的日期。
更改年月后，默认日期保持为第一天

Link 日期选择器中的年月日输入字段

Link Year, Month and Day input fields in a date picker

reactjs

react-datepicker