javascript - 使用 Material UI 管理日期选择器日期

Question

我必须确定日期选择器、开始日期和结束日期。我想对结束日期做的是，如果您选择开始日期为 12 月 15 日(例如)，那么当您选择结束日期时，到 12 月 15 日之前的所有日期都应该被禁用。

问题是我不知道如何将选定的开始日期传递到我的结束日期。

这是我的代码。

import React from 'react';
import DatePicker from 'material-ui/DatePicker';
import Divider from 'material-ui/Divider';

import cr from '../styles/general.css';


export default class DatePickers extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: '',
      endDate: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event, index, value) {this.setState({value});}

  render() {

    const today = new Date();
    today.setDate(today.getDate() + 1);

    return (
      <div className={cr.container}>
        <div className ={cr.boton}>
          <Divider/>
        </div>
        <div className={cr.rows}>
          <div>
            <div>
              <DatePicker
                hintText="Start Date"
                minDate = {today}
              />
              <br/>
              <DatePicker
                hintText="End Date"
              />
            </div>
          </div>
        </div>

      </div>
    );
  }
}

有什么帮助吗？？

问候..

Answer 1

查看their documentation你可以使用 minDate设置你需要的值和DatePicker负责自动为您禁用不必要的日期。

<DatePicker minDate={yourDateValue} />

为了操作日期，您可以使用 state例如，在每次日期更改时，您都会相应地更新它:

<DatePicker
  onChange={(_, date) => this.setState({ startDate: date })}
  value={this.state.startDate}
/>