HDTuto.com

React JS Get Current Date and Time Example



This post will give you example of get current time in react js. This article will give you simple example of how to get current timestamp in react js. I’m going to show you about react get current month example. you will learn how to display current date and time in react. you will do the following things for react get current date and time.

Here, i will give you very simple examples of how to get current date and time in react app. we will use Date() to get current timestamps and then display date and time in react js app. you can as listed example i will want to share with you.

1) React Get Current Date Time

2) React Get Current Date (Y-m-d)

3) React Get Current Month

4) React Get Current Year

5) React Get Current Time (H:i:s)

You can simply check one by one example and pick as you need anyone.

1) React Get Current Date Time

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:

Sun May 24 2020 09:59:56 GMT+0530 (India Standard Time)

2) React Get Current Date (Y-m-d)

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:

2020-5-24

3) React Get Current Month

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:

4

4) React Get Current Year

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:

2020

5) React Get Current Time (H:i:s)

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:

11:2:54

I hope it can help you...




June 17, 2020 | Category : React



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.