I have a datepicker and want to get only date in format YYYY-MM-DD. The default datetime format is:

Tue Feb 06 2018 00:00:00 GMT+0200 (FLE Standard Time)

How can to format this datepicker ? Also how can I change the color of the field to another color, ie the field on which the date is written.

handleChangeDate = (event, date) => {
this.setState({
  controllerDate: date
});
 };

onSubmitHandler(e){
    e.preventDefault();
    console.log(this.state.value)
    console.log(this.state.controllerDate)
  }

 <div className="col-md-3">           
              <DatePicker hintText="Изберете дата" onChange={ this.handleChangeDate } />
 </div>

I have a datepicker and want to get only date in format YYYY-MM-DD. The default datetime format is:

Tue Feb 06 2018 00:00:00 GMT+0200 (FLE Standard Time)

How can to format this datepicker ? Also how can I change the color of the field to another color, ie the field on which the date is written.

handleChangeDate = (event, date) => {
this.setState({
  controllerDate: date
});
 };

onSubmitHandler(e){
    e.preventDefault();
    console.log(this.state.value)
    console.log(this.state.controllerDate)
  }

 <div className="col-md-3">           
              <DatePicker hintText="Изберете дата" onChange={ this.handleChangeDate } />
 </div>

• javascript
• reactjs
• material-ui

• This is not a Bootstrap issue. – WebDevBooster Commented Feb 27, 2018 at 15:31

2 Answers 2

Here is the solution for getting the date in YYYY-MM-DD format

class DatePickerExampleSimple extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
        this.handleChangeDate = this.handleChangeDate.bind(this);
        this.formatDate = this.formatDate.bind(this);
    }

    formatDate(date) {
        let d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }

    handleChangeDate = (event, date) => {
        let formattedDate = this.formatDate(date);
        console.log(formattedDate);
        this.setState({
            controllerDate: formattedDate
        });
    };

  render(){
      return(<div>
          <DatePicker hintText="Изберете дата" onChange={ this.handleChangeDate } />
          <div>New selected value is {this.state.controllerDate}</div>
      </div>)
  }
};
export default DatePickerExampleSimple;

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

use moment to get your desire format... using you can get any format you want...

handleChangeDate = (event, date) => {
this.setState({
  controllerDate: moment(date).format('YYYY-MM-DD')
});
 };

onSubmitHandler(e){
    e.preventDefault();
    console.log(this.state.value)
    console.log(this.state.controllerDate)
  }

 <div className="col-md-3">           
              <DatePicker hintText="Изберете дата" onChange={ this.handleChangeDate } />
 </div>