React Js Get First and Last Day of Current Week

React Js Get First and Last Day of Current Week :In this tutorial, we will walk you through how to use React.js to get the first and last day of the current week. This can be particularly useful when building date-related features in your web applications. We'll explain the code step by step and provide a working example.

written

reviewed

updated

React First/Last Week Dates

  <script type="text/babel">
    const { useState } = React;
    function App() {
      const currentDate = new Date();
      const currentDay = currentDate.getDay();
      const firstDayOfWeek = new Date(currentDate);
      firstDayOfWeek.setDate(currentDate.getDate() - currentDay);
      const lastDayOfWeek = new Date(currentDate);
      lastDayOfWeek.setDate(currentDate.getDate() + (6 - currentDay));

      const firstDayString = firstDayOfWeek.toISOString().slice(0, 10);
      const lastDayString = lastDayOfWeek.toISOString().slice(0, 10);

      return (
        <div className='container'>
          <h3>React Js Get First and Last Day of the Current Week</h3>
          <p>First day of the week: {firstDayString}</p>
          <p>Last day of the week: {lastDayString}</p>
        </div>
      );
    }

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

Run

Output of above Code

Pasted Image

Code Explanation

Here's a breakdown of the code used in the React component:

We start by importing the useState function from the React library and defining a functional component called App. Inside App, we obtain the current date using the Date object and get the day of the week (0 for Sunday, 1 for Monday, and so on) using getDay().

const { useState } = React;

function App() {
  const currentDate = new Date();
  const currentDay = currentDate.getDay();

To calculate the first day of the current week, we create a new Date object named firstDayOfWeek, which is a copy of the current date. We then subtract the current day of the week from the date to go back to the beginning of the week.

  const firstDayOfWeek = new Date(currentDate);
  firstDayOfWeek.setDate(currentDate.getDate() - currentDay);

Similarly, we calculate the last day of the week by creating a new Date object named lastDayOfWeek and adding the number of days needed to reach the end of the week, which is 6 days minus the current day

  const lastDayOfWeek = new Date(currentDate);
  lastDayOfWeek.setDate(currentDate.getDate() + (6 - currentDay));

To display the first and last day of the week as strings, we convert them to ISO date strings and extract the first 10 characters to get the date portion

  const firstDayString = firstDayOfWeek.toISOString().slice(0, 10);
  const lastDayString = lastDayOfWeek.toISOString().slice(0, 10);

Finally, we render a simple user interface within the return statement. This UI displays the title, "React Js Get First and Last Day of the Current Week," along with the calculated first and last days of the week.

  return (
    <div className='container'>
      <h3>React Js Get First and Last Day of the Current Week</h3>
      <p>First day of the week: {firstDayString}</p>
      <p>Last day of the week: {lastDayString}</p>
    </div>
  );
}

React JS Tutorial

React Js Get First and Last Day of Current Week

Feedback for Abhishek

React First/Last Week Dates

Code Explanation