How change the showing value using input type date from 'MM/DD/YYYY" to 'February 5, 2012' - React.js/material-ui/TextField

Question

I have this material-ui/ TextField type date component, and I want to keep the style and the way of entering value. But i need to change the way the input component display the interning value to the 'en-us' format.

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"

want to show date in us format 'February 5, 2012' in the input field incited 'MM/DD/YYYY" format

Does this answer your question? [Is there any way to change input type="date" format?](https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format) — Joseph, Jun 23 '21 at 09:35

score 0 · Answer 1 · answered Jun 23 '21 at 09:45

0

Have you tried using moment.js? https://momentjs.com/

for your example the following code should work:

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

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

answered Jun 23 '21 at 09:45

Sha

37
8

Thanks, the issue not how i can handling the format, the issue how i can use the input type date but make it show the date with this ""February 5, 2012" format – Nazeh Taha Jun 23 '21 at 10:11

score 0 · Answer 2 · answered Jun 23 '21 at 09:53

You can use moment().format('MMMM D, YYYY') to convert you input date to expected date format.

You can also try Date pickers from React Materials UI. https://material-ui.com/components/pickers/#date-time-pickers . This will help you format date as expected.

How change the showing value using input type date from 'MM/DD/YYYY" to 'February 5, 2012' - React.js/material-ui/TextField

2 Answers2