未来 7 天自动日期选择器

Question

我有两个日期选择器，如果我在第一个日历中选择一个日期，它必须在第二个日历中标记下一个第七个日期。前任。第一个日期将在第一个日历 (01/01/22) 中选择，然后它必须在自动标记的下一个日历中显示 (07/01/22)。有想法这样做吗？我是 React js 的新手。如果我选择开始日期，则结束日期必须填写接下来 7 天的日期。

Answer 1

它会因您使用的日期选择器库而有所不同，但类似的东西应该可以工作（伪代码）：

state: {
   datePicker1Val: null,
   datePIcker2Val: null
}

componentDidUpdate(_prevProps, prevState) {
   if(prevState.datePicker1Val !== this.state.datePicker1Val) {
      setState(datePicker2Val: datePicker1Val.addDays(7))
   }
}

<DatePicker1 
    onChange={val => setState(datePicker1Val: val)}
    val={datePicker1Val}
 />
 <DatePicker2 
    onChange={val => setState(datePicker2Val: val)}
    val={datePicker2Val}
 />

Answer 2

import React, { useState } from 'react';
import "antd/dist/antd.css";
import {DatePicker , Space} from 'antd';
import moment from 'moment';

const App = () => {
  const [endDate, setEndDate] = useState(null);
  
  const onChange = date => setEndDate(moment(date).add(7, 'days'));

  return (
      <div>
        <h1>Date Select</h1>
        <Space direction='horizontal'>
          <DatePicker onChange={onChange} />
          <DatePicker value={endDate} disabled />
        </Space>
      </div>
  );
}

export default App;