Udemezue JohnIntroduction.
When working with React, there are moments when I need to dynamically display the current month and year in my application.
This could be for generating timestamps, displaying information in a footer, or simply adding a personalized touch to my UI.
Luckily, getting the current month and year in JavaScript is straightforward, and integrating it into a React component is even easier.
In this post, I’ll guide you through the process of fetching and rendering the current month and year in a React application.
How Do I Get the Current Month and Year in React JS?
In React, displaying the current month and year is a common task, whether for dynamically showing the date in a footer, header, or even as part of user interactions.
Fortunately, this is a simple task using JavaScript's native Date object, which makes working with dates and times straightforward.
In this guide, I’ll walk through how to extract the current month and year in a React application.
I’ll also explore some formatting options and potential improvements to handle more advanced scenarios.
1. Basic Setup: Using JavaScript's Date Object.
To start, let’s use JavaScript’s built-in Date object. This is a versatile tool that provides several methods to get the current date, month, year, and time. Here's a quick example:
import React from 'react';
function CurrentDate() {
const date = new Date(); // Create a new Date object representing the current date and time
const currentMonth = date.getMonth() + 1; // getMonth() returns 0 for January, so add 1
const currentYear = date.getFullYear(); // getFullYear() returns the full 4-digit year
return (
<div>
<p>Month: {currentMonth}</p>
<p>Year: {currentYear}</p>
</div>
);
}
export default CurrentDate;
In this example:
new Date() initializes a date object with the current date and time.
getMonth() returns the current month as a number from 0 to 11 (January is 0, February is 1, and so on). That’s why I add +1 to shift it to a more human-readable format.
getFullYear() returns the full four-digit year (e.g., 2024).
2. Handling Month Names Instead of Numbers.
If you prefer to display the month name (e.g., "October" instead of "10"), you can create an array that maps the numeric month values to their corresponding names.
Here’s how to adjust the above code to display the month as a word:
import React from 'react';
function CurrentDate() {
const date = new Date();
const monthNames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
const currentMonth = monthNames[date.getMonth()]; // Fetch the name from the array
const currentYear = date.getFullYear();
return (
<div>
<p>Month: {currentMonth}</p>
<p>Year: {currentYear}</p>
</div>
);
}
export default CurrentDate;
Here, I used an array called monthNames that contains all the month names.
By using the index from getMonth(), I can reference the corresponding month name in the array.
3. Formatting the Date Using Libraries (Optional)
While JavaScript’s Date object is powerful, it can become tricky when handling internationalization or formatting dates in different styles.
Libraries like date-fns or moment.js make formatting dates simpler and more readable.
Using date-fns.
date-fns is a lightweight and modern JavaScript library for date formatting. You can easily install it via npm:
npm install date-fns
Then, use it in your React component:
import React from 'react';
import { format } from 'date-fns';
function CurrentDate() {
const date = new Date();
const currentMonth = format(date, 'MMMM'); // Get the full month name
const currentYear = format(date, 'yyyy'); // Get the full year
return (
<div>
<p>Month: {currentMonth}</p>
<p>Year: {currentYear}</p>
</div>
);
}
export default CurrentDate;
In this example:
The format() function from date-fns is used to format the current date.
'MMMM' gives the full month name (like "October").
'yyyy' provides the full four-digit year.
Using moment.js (Deprecated, but still widely used).
moment.js used to be the go-to library for date handling, though it’s now in maintenance mode, and the developers recommend using alternatives like date-fns.
However, if you're working on a project that still uses moment.js, here's how to do the same thing:
npm install moment
Then, update the React component:
import React from 'react';
import moment from 'moment';
function CurrentDate() {
const currentMonth = moment().format('MMMM'); // Full month name
const currentYear = moment().format('YYYY'); // Full year
return (
<div>
<p>Month: {currentMonth}</p>
<p>Year: {currentYear}</p>
</div>
);
}
export default CurrentDate;
The format() method from moment makes formatting the date straightforward, similar to date-fns.
However, since moment.js is no longer being actively developed, I’d recommend date-fns or even JavaScript’s native Intl.DateTimeFormat for future-proofing your app.
4. Handling Edge Cases: Time Zones & Internationalization
If you're building an international app, handling time zones and locale-specific formatting is essential.
JavaScript provides the Intl.DateTimeFormat API for these cases, offering more flexibility for date formatting based on the user’s locale.
Here's an example:
import React from 'react';
function CurrentDate() {
const date = new Date();
const currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(date);
const currentYear = new Intl.DateTimeFormat('en-US', { year: 'numeric' }).format(date);
return (
<div>
<p>Month: {currentMonth}</p>
<p>Year: {currentYear}</p>
</div>
);
}
export default CurrentDate;
In this case, I use Intl.DateTimeFormat to format the month and year in a way that respects the locale settings.
The 'en-US' locale is just an example—this can be dynamically set based on the user’s preferences or the region your app is targeting.
5. React Hooks Approach.
If you need to update the current date in real-time or if you’re working with functional components (which React encourages), using useState and useEffect will allow you to dynamically update the date.
import React, { useState, useEffect } from 'react';
function CurrentDate() {
const [currentDate, setCurrentDate] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => {
setCurrentDate(new Date());
}, 1000); // Update the date every second (if needed)
return () => clearInterval(timer); // Cleanup on component unmount
}, []);
const currentMonth = currentDate.toLocaleString('en-US', { month: 'long' });
const currentYear = currentDate.getFullYear();
return (
<div>
<p>Month: {currentMonth}</p>
<p>Year: {currentYear}</p>
</div>
);
}
export default CurrentDate;
This approach ensures that the date updates in real-time by re-rendering every second (or any other interval).
Although it's often not necessary to update the date every second (since the month and year rarely change within seconds!), this structure can be useful in applications that track real-time data.
Conclusion.
In React, displaying the current month and year can be done in several ways, depending on the needs of the application. The basic Date object handles most situations perfectly well.
However, for more complex scenarios—such as dealing with time zones, internationalization, or custom formatting—libraries like date-fns or Intl.DateTimeFormat come in handy.
By carefully considering the requirements of your app, you can choose the best method for getting and displaying the current month and year while ensuring scalability and maintainability in the long run.
