用材料UI管理datepicker日期

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

查看他们的文档，您可以使用minDate设置所需的值，并且DatePicker会自动为您自动禁用不必要的日期。

<DatePicker minDate={yourDateValue} />

为了操纵日期，您可以使用state，并且在每个日期更改时，您可以相应地进行更新：

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