close

How to get system time in React JS?

Many times we need to show Our System Time In Our React App So In this Article, we are going to learn several methods about How to get system time in React JS? So let’s start this article without wasting your time.

How to get system time in React JS?

  1. How to get system time in React JS?

    To get system time in React JS You Want Your System Time In year-month-day ( y-m-d ) format then you need to Use getFullYear(), getMonth() and getDate() method of Date(). If You want Today date then You can use getDate() method. If You Only want the Current month then You need to use getMonth() method and If You need only the current year then You can use getFullYear().

  2. get system time in React JS

    To get system time in React JS We are going to use Date().toLocaleString(). It will Convert the Date to a Local time string and you will get the local time that exists in your system. First of all In the constructor add systemDateTime variable with value of Date().toLocaleString(). Now You can use systemDateTime in your render method.

Method 1: Using Date().toLocaleString()

In This Method, We are going to use Date().toLocaleString(). It will Convert the Date to a Local time string and you will get the local time that exists in your system. First of all In the constructor add systemDateTime variable with value of Date().toLocaleString() Just Like this.

  constructor() {
    this.state = {
      systemDateTime: Date().toLocaleString()
    }
  }

Now You can use systemDateTime in your render method Just like this.

  render() {
    return (
      <div>
        <p>
          { this.state.systemDateTime}
        </p>
      </div>
    );
  }

The output will be.

Thu September 22 2022 12:08:45 GMT+0530 (India Standard Time)

Here is My Full Source Code.

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    this.state = {
      systemDateTime: Date().toLocaleString()
    }
  }

  render() {
    return (
      <div>
        <p>
          { this.state.systemDateTime}
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Method 2: Get System time In Y-m-d Format In ReactJs

If You Want Your System Time In year-month-day ( y-m-d ) format then you need to Use getFullYear(), getMonth() and getDate() method of Date(). If You want Today date then You can use getDate() method Just Like below.

  constructor() {
    var today = new Date(),
    onlyTodayDate = today.getDate();

    this.state = {
      currentDate: onlyTodayDate
    }
  }

And Output will be

22

If You Only want the Current month then You need to use getMonth() method and If You need only the current year then You can use getFullYear(). As we need Y-m-d Then You need to do Just like this.

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    var today = new Date(),
    date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
   
    this.state = {
      formateDate: date
    }
  }

  render() {
    return (
      <div>
        <p>
          { this.state.formateDate}
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

And this is How you can get y-m-d format DateTime in Reactjs.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below on which solution worked for you.

Also, Read

Leave a Comment