How To Get Current Date And Time In React JS

Websolutionstuff | Sep-02-2022 | Categories : React JS

In this article, we will see how to get the current date and time in react js. You can get the current date and time using react js. We will use the date() function to get the current timestamp. Also, you can get the current month and current year in react js. In react js date function return current date yyyy-mm-dd.

So, let's see how to get the current date in react js, react js get the current date and time.

  • React Get Current Date Time
  • React Get Current Date (Y-m-d)
  • React Get Current Month
  • React Get Current Year
  • React Get Current Time (H:i:s)
React Get Current Date Time

 In this example, we will get the day name with date and time and also get the timezone.

import React, { Component } from 'react';
import { render } from 'react-dom';
   
class App extends Component {
  constructor() {
    this.state = {
      currentDateTime: Date().toLocaleString()
    }
  }
  
  render() {
    return (
      <div>
        <p>
          { this.state.currentDateTime }
        </p>
      </div>
    );
  }
}
  
render(<App />, document.getElementById('root'));

Output:

Sat Aug 27 2020 10:30:56 GMT+0530 (India Standard Time)

 

 

React Get Current Date (Y-m-d)

In this example, we will get the Y-m-d format date.

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 = {
      currentDate: date
    }
  }
   
  render() {
    return (
      <div>
        <p>
          { this.state.currentDate }
        </p>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

Output:

2022-08-27

 

React Get Current Month

In this example, we will get the current month using the getMonth() function.

import React, { Component } from 'react';
import { render } from 'react-dom';
  
class App extends Component {
  constructor() {
    this.state = {
      currentMonth: new Date().getMonth()
    }
  }
   
  render() {
    return (
      <div>
        <p>
          { this.state.currentMonth }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

Output:

8

 

 

React Get Current Year

In this example, we will get the current year using the getFullYear() function.

import React, { Component } from 'react';
import { render } from 'react-dom';
   
class App extends Component {
  constructor() {
    this.state = {
      currentYear: new Date().getFullYear()
    }
  }
   
  render() {
    return (
      <div>
        <p>
          { this.state.currentYear }
        </p>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

Output:

2022

 

React Get Current Time (H:i:s)

In this example, we will currently time using the javascript function.

import React, { Component } from 'react';
import { render } from 'react-dom';
   
class App extends Component {
  constructor() {
   
    var today = new Date(),
    time = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
   
    this.state = {
      currentTime: time
    }
  }
   
  render() {
    return (
      <div>
        <p>
          { this.state.currentTime }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

Output:

10:30:57

 


You might also like:

Recommended Post
Featured Post
Laravel 10 Delete Multiple Records Using Checkbox
Laravel 10 Delete Multiple Rec...

In this article, we will see laravel 10 delete multiple records using the checkbox. Here, we will learn about how to del...

Read More

Mar-03-2023

Laravel 9 Livewire Toastr Notification
Laravel 9 Livewire Toastr Noti...

In this article, we will see laravel 9 livewire toastr notification. Here, we will learn how to create toastr notif...

Read More

Nov-28-2022

Laravel 11 jQuery UI Ajax Autocomplete Search
Laravel 11 jQuery UI Ajax Auto...

Hello, laravel web developers! In this article, we'll see how to create an Ajax autocomplete search in laravel 11. h...

Read More

Jun-19-2024

Laravel 10 Change Column Name And Type In Migration
Laravel 10 Change Column Name...

In this article, we will see laravel 10 change column names and data types in migration. Here, we will learn about...

Read More

Apr-19-2023