接下来的 7 天自动日期选择器

Question

我有两个日期选择器，如果我 select 第一个日历中的日期必须标记第二个日历中的下一个第七天。前任。第一个日期将在第一个日历 (01/01/22) 中 selected，然后它必须在自动标记的下一个日历中显示 (07/01/22)。有什么想法吗？我是 React js 的新手。如果我 select 开始日期，那么结束日期必须填写下一个 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;

接下来的 7 天自动日期选择器

Next seven days auto date picker

datepicker

reactjs