如何在Material UI React中的DatePicker中格式化get和format Date

Question

我有一个datepicker，并希望只获得YYYY-MM-DD格式的日期。默认的日期时间格式为：

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

如何格式化这个日期选择器？另外，如何将字段的颜色更改为另一种颜色，即写入日期的字段。

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>

Answer 1

利用时刻来获得你想要的格式...使用你可以获得你想要的任何格式......

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>

Answer 2

以下是以YYYY-MM-DD格式获取日期的解决方案

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>