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?

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

• npm ERR! This is probably not a problem with npm. There is likely additional logging output above
• Yarn run error Command failed with exit code 1
• required Developer Mode to run. Until Developer Mode has been enabled this app will not be available for use
• requires libraries and applications that depend on it to compile against version 33 or later of the Android APIs. :app is currently compiled against android-32
• Error: Cannot find module ‘caniuse-lite/data/features/css-unicode-bidi’