ReactJS - дата отображения за 1 год до текущей даты

#javascript #reactjs #date #jsx

#javascript #reactjs #Дата #jsx

Вопрос:

Я создаю функцию поиска с фильтрами для своего веб-приложения. У меня есть дата начала и дата окончания для моих запросов, но по умолчанию я хочу, чтобы дата окончания всегда отображала сегодняшнюю дату, а дата начала отображала дату за 1 год до любой «сегодняшней даты». было бы.

Код:

 import React from "react";
import { Redirect, Route, Switch } from "react-router-dom";

import { Paper } from "@material-ui/core";


class MainSection extends React.Component {
  static contextType = AppContext;

  constructor(props) {
    super(props);
    this.state = {
      searchTerm: "",
      startDate: new Date(),
      endDate: new Date(),
      update: (data) => {
        console.debug(data)
        this.setState(data);
      },
    };
  }

В настоящее время я оставил StartDate пустым, чтобы избежать путаницы.

Ожидаемый результат будет:

На сегодня:

Дата начала: 2019/10/08

Дата окончания: 2020/10/08

На завтра:

Дата начала: 2019/10/09

Дата окончания: 2020/10/09

И т.д…

Стоит упомянуть, что я новичок в программировании, поэтому, если я упускаю что-то очевидное, пожалуйста, полегче со мной!

Приветствуются рекомендации по редактированию вопросов, чтобы я мог изучить этикет переполнения стека.

Ответ №1:

 var date = new Date();
date.setFullYear(date.getFullYear() - 1);
console.log(date)

чтобы использовать его в своем коде:

 class MainSection extends React.Component {
  static contextType = AppContext;

  constructor(props) {
    super(props);
    const oneYearAgo = new Date();
    oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
    this.state = {
      searchTerm: "",
      startDate: oneYearAgo,
      endDate: new Date(),
      update: (data) => {
        console.debug(data)
        this.setState(data);
      },
    };
  }

1. Спасибо! Прошу прощения, но как мне интегрировать это решение в свой код в React?

2. пожалуйста, выберите в качестве принятого ответа, если это сработало для вас

3. Спасибо! Намного проще, чем я думал. Могу сказать, что сегодня я кое-чему научился!

Ответ №2:

Вы можете использовать moment.js библиотека для всех требований к обработке дат. Он имеет функцию вычитания, которую вы можете использовать, чтобы вернуть дату на 1 год назад. Для React есть npm с реактивным моментом, который будет удобен.

ниже приведены ссылки.. https://www.npmjs.com/package/react-moment

https://www.npmjs.com/package/react-moment#add-and-subtract

Ответ №3:

взгляните на этот код

 var date = new Date();
document.querySelectorAll('#originalDate')[0].innerText = date.toISOString()

date.setFullYear(date.getFullYear() - 1);
document.querySelectorAll('#editedDate')[0].innerText = date.toISOString()

 <p id="originalDate"> </p>
<p id="editedDate"> </p>