JIYIK CN >

Date()To get the current year in React, use the constructor, for example new Date().getFullYear(). getFullYear()The method will return a number corresponding to the current year.

const App = () => {
  console.log(new Date().getFullYear());

  return (
    <div>
      <div>{new Date().getFullYear()}</div>

      <br />

      <div>Copyright © {new Date().getFullYear()} James Doe</div>
    </div>
  );
};

export default App;

We use Date()the constructor to get a Date object on which we can call various methods.

We then call Date.getFullYearthe method, which returns a number representing the year corresponding to the current date.

Note that we have to getFullYear()wrap the call to the method in curly braces in the JSX code.

<div>{new Date().getFullYear()}</div>

The curly braces mark the beginning of an expression that must be evaluated.

The JavaScript code between the curly braces will be evaluated using the current year.

Other common methods of Date objects are:

• Date.getMonth - Returns an integer between 0 (January) and 11 (December) representing the month of a given date. Yes, unfortunately the getMonth method is off by 1.
• Date.getDate - returns the day of the month for a specific date

const App = () => {
  const year = new Date().getFullYear();
  const month = new Date().getMonth() + 1;
  const day = new Date().getDate();

  return (
    <div>
      <div>{new Date().getFullYear()}</div>
      <div>{new Date().getMonth() + 1}</div>
      <div>{new Date().getDate()}</div>

      <br />

      <div>Copyright © {new Date().getFullYear()} James Doe</div>
    </div>
  );
};

export default App;

These methods allow us to get the year/month/day of any date object, it does not have to be the current year.

const App = () => {
  const date = '2023-07-21';
  const year = new Date(date).getFullYear();
  const month = new Date(date).getMonth() + 1;
  const day = new Date(date).getDate();

  return (
    <div>
      <div>{new Date(date).getFullYear()}</div>
      <div>{new Date(date).getMonth() + 1}</div>
      <div>{new Date(date).getDate()}</div>

      <br />

      <div>Copyright © {new Date(date).getFullYear()} James Doe</div>
    </div>
  );
};

export default App;