React Js Tutorial- How To Get And Display The Current Date And Time

Learn To Get Current Date And Time In React Js App

This React tutorial will help us get and display the current date and time in our React Js app. In addition, we will get to know about getting the current year as well as the month in the app.

The new Date(), getMonth(), and getFullYear() functions will be used in order to get and display the current date, time, month and year in the React Js app.

Now, let’s start with the React example and learn the above-mentioned step by step:

How To Get Current Date And Time In React Js App

We can use the following examples to get the current date, time, month and year with different formats in React js app:

To Get Full Current Date Time
To Get Current Date In This Format (Y-M-D)
To Get Current Month
To Get Current Year
To Get Current Time (H:i:s)

1- To Get Full Current Date Time

We have to use the following example code for getting the current date and time in React js app:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends React.Component {
  state={
    curDT : new Date().toLocaleString(),
  }
  render(){
    return (
      <div className="App">
        <p>Current Date And Time : {this.state.curDT}</p>
      </div>
    );
  }
}
 
export default App;

2- To Get Current Date In This Format (Y-M-D) To Get Current Month

We have to use the following example code for getting the current date in Y-M-D format React js app:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends React.Component {
 
 
  state = {
    date: ""
  };
 
  componentDidMount() {
    this.getDate();
  }
 
  getDate = () => {
    var today = new Date(),
 
    date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
 
    this.setState({ date });
  };
 
  render(){
    return (
      <div className="App">
        <p>Current Date (Y-m-d) : {this.state.date}</p>
      </div>
    );
  }
}
 
export default App;

3- To Get Current Month

We have to use the following example code for getting the current month in React js app:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends React.Component {
 
 
  state = {
    curMonth: ""
  };
 
  componentDidMount() {
    this.getCurMonth();
  }
 
  getCurMonth = () => {
    var today = new Date(),
 
    curMonth = today.getMonth()+1;
 
    this.setState({ curMonth });
  };
 
  render(){
    return (
      <div className="App">
        <p>Current Month : {this.state.curMonth}</p>
      </div>
    );
  }
}
 
export default App;

4- To Get Current Year

We have to use the following example code for getting the current year in React js app:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends React.Component {
 
 
  state = {
    curYear: ""
  };
 
  componentDidMount() {
    this.getCurYear();
  }
 
  getCurYear = () => {
    var today = new Date(),
 
    curYear = today.getFullYear();
 
    this.setState({ curYear });
  };
 
  render(){
    return (
      <div className="App">
        <p>Current Year: {this.state.curYear}</p>
      </div>
    );
  }
}
 
export default App;

5- To Get Current Time (H:i:s)

We will be using the below code for getting current time in H:i:s format in React Js app:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends React.Component {
 
 
  state = {
    curTime: ""
  };
 
  componentDidMount() {
    this.getTime();
  }
 
  getTime = () => {
    var today = new Date(),
 
    curTime = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
 
 
    this.setState({ curTime });
  };
 
  render(){
    return (
      <div className="App">
        <p>Current Time (H:i:s) : {this.state.curTime}</p>
      </div>
    );
  }
}
 
export default App;

Conclusion

Hope that you have well understood how to get and display current date, time, month, year in React Js app.

Thanks