Solution
To get day from date in React, you can use the getDay()
method it will return number between 0
to 6
, with 0
representing Sunday, 1
representing Monday, and so on.
To format a date you can read my below article, here I have explained multiple ways to format a date.
https://reactjssnippet.com/posts/how-to-display-date-in-react-js/
Snippet
In this snippet, we will see short example to get day from date in react js.
const date = new Date("2022-12-28");
const day = date.getDay();
console.log("the day is: ", day) // the day is: 3
Example
In this example, we will write a react js code to get day from date object and show in the React UI.
Let’s list down what we are going to do below example.
- Create
day
state - set day in state from date object ( useEffect )
- Show Day name using
day
number
import React, { useState, useEffect } from "react";
const DAY_NAMES = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
export default function App() {
const [day, setDay] = useState(null);
const [dayName, setDayName] = useState(null);
useEffect(() => {
const date = new Date("2022-12-28");
const dayIndex = date.getDay();
setDayName(DAY_NAMES[dayIndex]);
setDay(dayIndex);
}, []);
return (
<div className="App">
<h1>Current Day</h1>
<p>{day}</p>
<p>{dayName}</p>
</div>
);
}
Output