React Js Get Current Date and Time Tutorial

To get the current date and time, In this tutorial, you will learn how to get and display the current date and time with year, month and day react js applications.

The new Date() object provides functions that allow users to get and display the current date, current time, current month, and current year.

How to Get Current Date and Time In React Js

Here are some 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

Conclusion

That’s it, you have learned how to get current date and time in react js applications.

Recommended React JS Post