ReactJS-显示当前日期前一年的日期

编程问答 2022-06-09

问题描述

我正在为我的Web应用程序提供带有过滤器的搜索功能。我有查询的开始日期和结束日期，但是默认情况下，我希望结束日期始终显示今天的日期，但是开始日期要显示比“今天的日期”晚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

等等...

值得一提的是，我是编程新手，所以如果我缺少明显的东西，请放轻松！

欢迎提出问题建议，这样我就可以学习Stack Overflow礼节。

解决方法

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);
      },};
  }
,

您可以使用moment.js库来满足所有日期操作要求。它具有减法功能，您可以使用该功能将日期追溯到1年。 对于React，有个react-moment npm会很方便。

下面是链接。 https://www.npmjs.com/package/react-moment

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

,

看看这段代码

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>

datejavascriptjsxjsxreactjsreactjs