如何使用输入类型日期将显示值从“MM/DD/YYYY”更改为“2012 年 2 月 5 日”-React.js/material-ui/TextField答案

【问题标题】：How change the showing value using input type date from 'MM/DD/YYYY" to 'February 5, 2012' - React.js/material-ui/TextField如何使用输入类型日期将显示值从“MM/DD/YYYY”更改为“2012 年 2 月 5 日”-React.js/material-ui/TextField
【发布时间】：2021-09-06 20:25:19
【问题描述】：

我有这个material-ui/TextField类型的日期组件，我想保留样式和输入值的方式。但我需要将输入组件显示实习值的方式更改为“en-us”格式。

const options1 = {  year: 'numeric', month: 'long', day: 'numeric' };
const date1 = new Date(2012,1, 5);


const dateTimeFormat3 = new Intl.DateTimeFormat('en-US', options1);

console.log(dateTimeFormat3.format(date1));

// expected output: "February 5, 2012"

想要在输入字段中以“MM/DD/YYYY”格式显示我们格式“2012 年 2 月 5 日”的日期

【问题讨论】：

这能回答你的问题吗？ Is there any way to change input type="date" format?

标签： javascript reactjs material-ui

【解决方案1】：

您是否尝试过使用 moment.js？ https://momentjs.com/

对于您的示例，以下代码应该可以工作：

moment().format('MMMM D, YYYY'); // June 23, 2021

https://momentjs.com/docs/#/displaying/

【讨论】：

谢谢，问题不是我如何处理格式，问题是我如何使用输入类型日期，但使用“2012 年 2 月 5 日”格式显示日期

【解决方案2】：

您可以使用moment().format('MMMM D, YYYY') 将您输入的日期转换为预期的日期格式。

您也可以从 React Materials UI 尝试日期选择器。 https://material-ui.com/components/pickers/#date-time-pickers .这将帮助您按预期格式化日期。

【讨论】：