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

Posted 2023-05-07

【中文标题】Material UI 日期选择器 日期格式 React

【英文标题】：Material UI date picker Date format React

【发布时间】：2018-10-23 15:11:20

【问题描述】：

我无法在 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



                    />

【参考方案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

【参考方案2】：

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

【参考方案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"

或任何其他方式

【参考方案4】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?