CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
kennechu
kennechu

Reputation: 1422

Manage datepicker dates with material ui

I have to date pickers, start date and end date. what I want to do with the end date is that if you choose the start date to be December 15 (for example) then when you choose the end date all the previous days to December 15 should be disable.

The thing is that I don't know how to pass to my end date the selected start date.

This is my 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>
    );
  }
}

Any help on this??

Regards..

Upvotes: 2

Views: 5538

Answers (1)

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

Looking at their documentation you can use minDate to set the value you need and DatePicker takes care of disabling unnecessary dates automatically for you.

<DatePicker minDate={yourDateValue} />

In order to manipulate dates, you can use state for example and, on every date change, you update it accordingly: 

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

Upvotes: 2

Related Questions