Как получить текущую дату и время в React.js

В этом уроке мы узнаем, как получить текущую дату и время в React JS с помощью функции Date(). В этом руководстве также показано, как форматировать дату и время различными способами, например «ГГГГ-ММ-ДД» или «чч:мм:сс».

Давайте посмотрим, как получить текущую дату в React JS, как React JS получить текущую дату и время.

• 1: Реагировать на получение текущей даты и времени
• 2: Реагировать на получение текущей даты (Ymd)
• 3. Реагировать на получение текущего месяца
• 4: Реагировать на получение текущего года
• 5. Реагировать на получение текущего времени (ч:и:с)

1: Реагировать на получение текущей даты и времени

 В этом примере мы получим название дня с датой и временем, а также часовой пояс.

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'));

2: Реагировать на получение текущей даты (Ymd)

В этом примере мы получим дату в формате Ymd.

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'));

Выход:

2023-09-02

3. Реагировать на получение текущего месяца

В этом примере мы получим текущий месяц с помощью функции getMonth().

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'));

Выход:

9

4: Реагировать на получение текущего года

В этом примере мы получим текущий год с помощью функции getFullYear().

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'));

Выход:

2023

5. Реагировать на получение текущего времени (ч:и:с)

В этом примере мы сейчас будем использовать функцию javascript.

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'));

Выход:

11:20:38

Приятного кодирования!!!