Material UI 日期选择器 日期格式 React

Question

我无法在 React 应用程序中格式化 Material UI 日期选择器？？

当用户选择日期时，我希望它的格式为 MM/DD/YYYY。我查了几个答案，但不清楚更改格式的功能应该去哪里？？？由于某种原因，它的上线位置没有明确的功能/位置>>

日期选择器组件

import React from 'react';
import DatePicker from 'material-ui/DatePicker';

/**
 * `DatePicker` can be implemented as a controlled input,
 * where `value` is handled by state in the parent component.
 */
export default class DateSelect extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      controlledDate: null,
      openSnackbar: false,
      snackbarText: {
        dateconf: 'Date has been entered!'
      }
    };
  }
  formatDate(date){


  return (date.getMonth() + 1) + "/" + date.getFullYear() + "/" +  date.getDate();
}
  handleChange = (event, date) => {
    console.log('we are in a handle change in date select', event, date)
    this.setState({
      controlledDate: date,
    });
    // this.setState({
        //  openSnackbar: true
        // })
  };

  render() {
    console.log('state and props in date select', this.state, this.props)

    return (
      <DatePicker formatDate={this.formatDate}
        hintText="Date of purchase"
        hintStyle={{color:'whitesmoke'}}
        inputStyle={{ color:'whitesmoke'}}
        value={this.state.controlledDate}
        onChange={this.props.onChange}
      />


    );
  }
}

     ///THE PARENT COMPONENT



   handleDatePicker = (name, date) => {
console.log('handling date change', name, date)
this.setState(prevState => ({
    currentRow: {
        ...prevState.currentRow,
        purchase_date: date
    },
    purchase_date: date,
    actionType: 'date'
}))
this.setState({
    openSnackbar: true
})

   }



                    <DateSelect 
                    hintText="Purchase date"
                    value = {this.state.purchase_date}
                    onChange={this.handleDatePicker}



                    />

Answer 1

您需要使用formatDate函数来格式化日期选择器中的日期和时间

formatDate --> 调用此函数来格式化输入字段中显示的日期，并应返回一个字符串。默认 如果没有提供语言环境和 DateTimeFormat 日期对象被格式化 符合 ISO 8601 YYYY-MM-DD。

<DatePicker
        hintText="Date of purchase"
        hintStyle={{color:'whitesmoke'}}
        inputStyle={{ color:'whitesmoke'}}
        value={this.state.controlledDate}
        onChange={this.props.onChange}
        formatDate={(date) => moment(new Date()).format('MM-DD-YYYY')}
      />

如果您没有在日期上传递任何格式，则似乎最小和最大日期不起作用。

更多详情material-ui/DatePicker

Answer 2

formatDate 在 V4 中对我不起作用。 documention 建议 inputFormat 并正常工作。我找到了用法示例 here

Answer 3

直接来自 DatePicker 的文档。试试这个

<DatePicker 
        inputFormat="MM/dd/yyyy"
        hintText="Date of purchase"
        hintStyle={{color:'whitesmoke'}}
        inputStyle={{ color:'whitesmoke'}}
        value={this.state.controlledDate}
        onChange={this.props.onChange}
      />

inputFormat 通常应该可以解决问题。你可以随意改变它，它也可以用于 dateTimePicker。

例如，

inputFormat="yyyy/MM/dd"

或任何其他方式

Answer 4

<DatePicker
  openTo="year"
  views={["year", "month", "day"]}
  value={toDate}
  onChange={(newValue) => {setToDate(newValue);}}  
  maxDate={maxdate}
  minDate={minDate}
  format="DD-MM-YYYY"
/>