React Js Get Day Name from a Specific Date

In this tutorial, we'll explore how to extract the day name from a given date using React JS. We'll construct a basic React component that accepts a date as input and provides the corresponding day of the week as output. This functionality will enable developers to easily retrieve and display the day name for any chosen date within a React application

written

reviewed

updated

Introduction

Getting the day name from a specific date can be a common requirement in various web applications, such as scheduling apps, event calendars, or date pickers. With React JS, this task becomes straightforward.

Code Explanation

Here's the code that accomplishes this task:

How to Get Day Name from a Specific Date in React JS

  <script type="text/babel">
    function App() {
      const getDayName = (dateString) => {
        const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        // Create a Date object from the input date string
        const date = new Date(dateString);

        // Use the getDay() method to get the day of the week (0 = Sunday, 1 = Monday, etc.)
        const dayOfWeekIndex = date.getDay();

        // Get the day name from the array using the index
        const dayName = daysOfWeek[dayOfWeekIndex];

        return dayName;
      };

      const specificDate = '2002-10-20'; // Replace with your specific date
      const dayName = getDayName(specificDate); // Fixed this line

      return (
        <div className="container">
          <h3 className="title">React Js Get Day Name from a Specific Date </h3>
          <p className="paragraph">Day name for {specificDate} is {dayName}.</p>
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

xxxxxxxxxx
 
  <script type="text/babel">
    function App() {
      const getDayName = (dateString) => {
        const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        // Create a Date object from the input date string
        const date = new Date(dateString);
​
        // Use the getDay() method to get the day of the week (0 = Sunday, 1 = Monday, etc.)
        const dayOfWeekIndex = date.getDay();
​
        // Get the day name from the array using the index
        const dayName = daysOfWeek[dayOfWeekIndex];
​
        return dayName;
      };
​
      const specificDate = '2002-10-20'; // Replace with your specific date
      const dayName = getDayName(specificDate); // Fixed this line
​
      return (
        <div className="container">
          <h3 className="title">React Js Get Day Name from a Specific Date </h3>
          <p className="paragraph">Day name for {specificDate} is {dayName}.</p>
        </div>
​
      );
    }
​
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Code Breakdown

We define a function named getDayName that takes a dateString as input.
We create an array called daysOfWeek that holds the names of the days of the week.
Inside the getDayName function, we create a Date object using the provided dateString.
We use the getDay() method on the Date object to obtain the day of the week index, where 0 represents Sunday, 1 represents Monday, and so on.
We then retrieve the day name from the daysOfWeek array using the obtained index.
Finally, the component renders the day name for the specific date '2002-10-20'.

Output of Code is:

The code is a React component that displays the day name for a specific date, '2002-10-20'. It renders a webpage showing: "Day name for 2002-10-20 is Sunday."

Pasted Image

Conclusion

In this post, we demonstrated how to get the day name from a specific date in a React JS application. The code is straightforward and can be easily integrated into various projects that require working with dates and calendars. Whether you're building a scheduling app or simply need to display the day name,