How to Get the Current Year in React

Last updated on April 23, 2023

To get the current year in React, create a new Date object with the Date() constructor, then use the getFullYear() method to get the year of the Date. getFullYear() will return a number that represents the current year.

import React from 'react';

function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <div>
      {currentYear}
      <div>&copy; {currentYear} Coding Beauty</div>
    </div>
  );
}

export default Footer;

We use the Date() constructor to create a new Date object. When Date() is called with no arguments, the Date object is created using the current date and time.

The Date getFullYear() method returns a number that represents the year of the Date. Since the Date object here stores the current date, getFullYear() returns the current year.

Get current month in React

If you also want to get the current month, the getMonth() method is for you.

getMonth() returns a zero-based index that represents the month of the Date. Zero-based here means that 0 = January, 1 = February, 2 = March, etc.

import React from 'react';

function MonthYear() {
  const currMonth = new Date().getMonth();
  const currYear = new Date().getFullYear();

  return <div>Month number {currMonth} in {currYear}</div>;
}

export default MonthYear;

Get current month name

If you want the month name directly (the more likely case), the Date toLocaleString() method will do the job.

import React from 'react';

function MonthYear() {
  const currMonth = new Date().toLocaleString([], {
    month: 'long',
  });
  const currYear = new Date().getFullYear();

  return <div>{currMonth} in {currYear}</div>;
}

export default MonthYear;

Check out this article for a full guide on how to convert a month number to its equivalent month name in JavaScript.

Get current day of month in React

Similarly, to get the current day in the month, you’d use the Date getDate() method:

import React from 'react';

function DateDisplay() {
  const currDay = new Date().getDate();
  const currMonth = new Date().toLocaleString([], {
    month: 'long',
  });
  const currYear = new Date().getFullYear();

  return <div>{currMonth} {currDay}, {currYear}</div>;
}

export default DateDisplay;

Get current year, month, day, week…

While you could get each component of the date using different functions, a much more flexible and easy way to do this is by formatting the date in the given format with a format specifier.

We can carry out this formatting with the format() function from the date-fns library.

In the following example, we use date-fns format() to get the multiple individual parts of the date.

import React from 'react';
import { format } from 'date-fns';

function DateDisplay() {
  const dateString = format(
    new Date(),
    "EEEE, 'the' do 'of' LLLL, yyyy"
  );

  return <div>{dateString}</div>;
}

export default DateDisplay;

The format() function takes a pattern and returns a formatted date string in the format specified by the pattern. You can find a list of the patterns format() accepts here.

For our example, we use the following patterns:

EEEE: to get the full name of the day of the week.
do: to get the ordinal day of the month, i.e., 1st, 2nd, 3rd, etc.
LLLL: to get the full name of the month of the year.
yyyy: to get the full year.

We also use single quotes to escape strings (the and of) that are not patterns but should be included in the result of the formatting.

Key takeaways

To get the current year in React, use new Date().getFullYear().
To get the current month name, use toLocaleString() with the month: 'long' specifier.
To get the current day in the month, use the getDate() method.
Use the date-fns library's format() function to easily format and obtain multiple parts of the date.

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.