How to get the current date in React JS

Getting the current date in a React JS application is a common task that can be useful for displaying date-related information, performing date-based calculations, or simply logging events. In this blog post, we’ll explore various methods to get the current date in a React JS application and format it according to your needs.

Prerequisites

Before we begin, ensure you have the following:

1. A basic understanding of React JS.
2. Node.js and npm installed on your machine.
3. A React project set up. If you don’t have one, you can create it using Create React App:

   npx create-react-app get-current-date-demo
   cd get-current-date-demo
   npm start

Methods to Get the Current Date

Method 1: Using JavaScript’s Date Object

The simplest way to get the current date is by using JavaScript’s built-in Date object. Here’s a basic example:

import React from 'react';

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

  return (
    <div className="App">
      <h1>Current Date</h1>
      <p>{currentDate}</p>
    </div>
  );
}

export default App;

This will display the current date in the default locale format.

Method 2: Using JavaScript’s Date Object with Custom Formatting

If you need a specific date format, you can use the Date object along with custom formatting:

import React from 'react';

function App() {
  const currentDate = new Date();
  const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;

  return (
    <div className="App">
      <h1>Current Date</h1>
      <p>{formattedDate}</p>
    </div>
  );
}

export default App;

This example formats the date as DD/MM/YYYY.

Method 3: Using a Date Library (Moment.js)

For more advanced date manipulation and formatting, using a date library like Moment.js can be very helpful. First, you need to install Moment.js:

npm install moment

Then, you can use Moment.js to get and format the current date:

import React from 'react';
import moment from 'moment';

function App() {
  const currentDate = moment().format('MMMM Do YYYY, h:mm:ss a');

  return (
    <div className="App">
      <h1>Current Date</h1>
      <p>{currentDate}</p>
    </div>
  );
}

export default App;

This example uses Moment.js to format the date as Month Day Year, Hour:Minute:Second AM/PM.

Method 4: Using the date-fns Library

Another popular date library is date-fns, which provides a wide range of functions for date manipulation. First, install date-fns:

npm install date-fns

Then, you can use date-fns to get and format the current date:

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

function App() {
  const currentDate = format(new Date(), 'MMMM do, yyyy H:mm:ss a');

  return (
    <div className="App">
      <h1>Current Date</h1>
      <p>{currentDate}</p>
    </div>
  );
}

export default App;

This example formats the date as Month Day, Year Hour:Minute:Second AM/PM.

Conclusion

Getting the current date in a React JS application can be achieved using various methods, from the built-in Date object to advanced date libraries like Moment.js and date-fns. Depending on your requirements for date formatting and manipulation, you can choose the method that best suits your needs.

Using the Date object is straightforward for simple tasks, while libraries like Moment.js and date-fns provide more flexibility and functionality for complex date operations. Happy coding!