React Date Format - dd/mm/yyyy | yyyy-mm-dd
In this tutorial, we will learn how to use React to format dates such as dd/mm/yyyy, yyyy-mm-dd, mm/dd/yyyy, and dd-mmm-yyyy using JavaScript methods. Whether you want to display dates in dd/mm/yyyy, yyyy-mm-dd, or any other format in React.js.
Thanks for your feedback!
Your contributions will help us to improve service.
How to Format Date dd/mm/yyyy in React Js?
In this example, we describe how to format the date in React JS as dd/mm/yyyy. We use the `date.toLocaleDateString('en-GB')` function to convert the current date format to dd/mm/yyyy.
React Js Date Format dd/mm/yyyy
<script type="text/babel"> function App() { const date = new Date(); const formattedDate = date.toLocaleDateString('en-GB'); return ( <div className='container'> <h2>React Js Formatted Date DD/MM/YYYY</h2> <p>Formatted Date: {formattedDate}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Date Format DD/MM/YYYY
Example 2: React Date Format yyyy-mm-dd
In this second example, we show how to format a date in yyyy-mm-dd format in ReactJS. We use date.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }) to convert the current date into the yyyy-mm-dd format in ReactJS. You can use the following example to edit your code with try it:
React Format Date yyyy-mm-dd Code
xxxxxxxxxx <script type="text/babel"> function App() { const date = new Date(); // Format the date to YYYY-MM-DD const formattedDate = date.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit', }).split('/').reverse().join('-'); return ( <div className='container'> <h2>React Js Formatted Date YYYY-MM-DD</h2> <p>Formatted Date: {formattedDate}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app"));</script>Output of React Js Date Format YYYY-MM-DD
Example 3 : React Format Date mm/dd/yyyy
In the React date format of the third example, we demonstrate how to format the current date (new Date()) into mm/dd/yyyy in ReactJS using date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' });. In the code snippet below, you will obtain the desired date format such as mm/dd/yyyy. You can edit and use this code in your project.
React Format Date mm/dd/yyyy Example
xxxxxxxxxx <script type="text/babel"> function App() { const date = new Date(); // Current date const formattedDate = date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric', }); return ( <div className='container'> <h2>React Js Formatted Date MM/DD/YYYY</h2> <p>Formatted Date: {formattedDate}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Date Format MM/DD/YYYY
Example 4 : How to change Date Format From dd/mm/yyyy to dd-mmm-yyyy in React Js?
In this example number 4, we will learn how to convert a date (dd/mm/yyyy) into (dd-mmm-yyyy) format in React.js by using JavaScript's `toLocaleString` function.
React change Date Format From dd/mm/yyyy to dd-mmm-yyyy
xxxxxxxxxx <script type="text/babel"> const { useState } = React; function App() { const [originalDate] = useState('17/02/2024'); const convertDateFormat = (inputDate) => { const [day, month, year] = inputDate.split('/'); const dateObject = new Date(`${month}/${day}/${year}`); const monthAbbreviation = dateObject.toLocaleString('default', { month: 'short' }); const formattedDate = `${day}-${monthAbbreviation}-${year}`; return formattedDate; } const formattedDate = convertDateFormat(originalDate); return ( <div className='container'> <h2>React Js Formatted Date DD MMM YYYY</h2> <p>Original Date: {originalDate}</p> <p>Formatted Date: {formattedDate}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Date Format DD MMM YYYY Example
