Manage Datepicker Daten mit Material ui

Question

Ich muss Datum Picker, Startdatum und Enddatum. Was ich mit dem Enddatum machen möchte, ist, dass wenn Sie das Startdatum zum 15. Dezember (zum Beispiel) wählen, wenn Sie das Enddatum wählen, alle vorherigen Tage bis zum 15. Dezember deaktiviert sein sollten.

Die Sache ist, dass ich nicht weiß, wie zu meinem Enddatum das gewählte Startdatum übergeben werden.

Dies ist mein Code.

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> 
    ); 
    } 
} 

Irgendwelche Hilfe zu diesem Thema?

Grüße ..

Answer 1

bei their documentation Suchen können Sie minDate verwenden Sie den Wert, den Sie brauchen zu setzen und DatePicker kümmert sich für Sie Deaktivieren nicht benötigter Daten automatisch. entsprechend

<DatePicker minDate={yourDateValue} />

Um Daten zu manipulieren, Sie state zum Beispiel und auf jedem Datumswechsel verwenden, können Sie es, aktualisieren:

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