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

查看https://developer.vimeo.com/api/endpoints/tags#GET/tags/，您可以使用minDate设置所需的值，DatePicker负责为您自动停用不必要的日期。

<DatePicker minDate={yourDateValue} />

为了操纵日期，您可以使用state作为示例，并在每次更改日期时相应地更新日期：

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

使用材料ui管理datepicker日期

1 个答案: