How to Get the Current Year in React

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;

Different parts of the date are displayed using formatting.

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.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.