How to Get Current Date and Time in React Apps

by

React get the current date and time example; In this tutorial, i will guide you step by step 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.

It is very easy to get current date and time in react js app. For this, you can use some JavaScript methods like getdate(), gettime(), getMonth(), and getFullYear(). In this tutorial I will tell you with 6 examples how you can get current date, time, month and year in your react app and show them as well.

React get current date and time example tutorial; i will get get and display the current date, time, month, and year with different formats in react js app.

React Get Current Date and Time Examples

  1. To Get Full Current Date Time
  2. To Get Current Date In This Format (Y-m-d)
  3. To Get Current Month
  4. To Get Current Year
  5. To Get Current Time (H:i:s)

1 :- To Get Full Current Date Time

Use the following react code for 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 react code for 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 react code for 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 react code for 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 react code for 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 Tutorials

Leave a Comment