Material-UI Pickers：将日期显示为（M、DD、YYYY）->（2019 年 4 月 17 日）答案

【问题标题】：Material-UI Pickers: Display Date as (M, DD, YYYY) -> (April 17, 2019)Material-UI Pickers：将日期显示为（M、DD、YYYY）->（2019 年 4 月 17 日）
【发布时间】：2019-09-08 03:35:03
【问题描述】：

这是 Material-Ui Pickers 库：https://material-ui-pickers.dev/api/datepicker

如您所见，似乎可以将日期显示为（月日）字符串或（MM/DD/YYYY）日期，但是我找不到任何可以让我将日期显示为（月 DD，YYYYY）的东西) 这可能吗，我错过了什么吗？

【问题讨论】：

标签： html date material-ui

【解决方案1】：

看起来 Material 使用 Moment.js 或 Date.fns，你应该使用你正在使用的任何库的格式标准。例如，Moment 使用 MMMM Do YYYY

【讨论】：

没错，我正在使用 Moment，我不知道为什么我没想过要查看他们的文档。谢谢~

【解决方案2】：

您可以使用format 属性来覆盖文本字段中的格式。

您还可以利用global format customization 指南。它允许直接在日期/时间选择器模式对话框中更改格式。

【讨论】：

【解决方案3】：

这是一个使用时刻的例子：

import React, { useState } from 'react';
import moment from 'moment';
import { MuiPickersUtilsProvider, DatePicker } from 'material-ui-pickers';
import MomentUtils from '@date-io/moment';

class LocalizedUtils extends MomentUtils {
  getDatePickerHeaderText(date) {
    return moment(date).format('ll');
  }
}

function DateLocalizationExample() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={LocalizedUtils}>
      <DatePicker
        clearable
        helperText="moment"
        format="ll"
        value={selectedDate}
        onChange={handleDateChange}
        clearLabel="vider"
        cancelLabel="annuler"
      />
    </MuiPickersUtilsProvider>
  );
}

export default DateLocalizationExample;

【讨论】：