React Js Get Current Date and Time Tutorial

To get the current date and time in react js app. In this tutorial, you will learn how to get and display the current date and time react js app. And as well as how to get current year and month in react js app.

The new Date(), getMonth(), and getFullYear() functions have been used in this tutorial to get and display the current date, current time, current month, and current year in react js app.

This example tutorial will guide you on how to get and display the current date, time, month, and year with different formats in react js app.

How to Get Current Date and Time In React Js

You can use the following examples to get current date yyyy-mm-dd, 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

Use the following example code to get 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;

Output:

Current Date And Time : 30/06/2021, 16:45:40

2 :- To Get Current Date In This Format (Y-m-d)To Get Current Month

Use the following example code to get current date in Y-m-d format in 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;

output:

Current Date (Y-m-d) : 2021-6-19

3 :- To Get Current Month

Use the following example code to get 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;

Output:

Current Month : 6

4 :- To Get Current Year

Use the following example code to get 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;

Output:

Current Year : 2021

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

Use the following example code to get 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;

Output:

Current Time (H:i:s) : 11:26:14

Note that, The new Date(), getMonth(), and getFullYear() functions have been used in this tutorial to get and display the current date, current time, current month, and current year in react js app.

Recommended React JS Post