如何在日期選擇器中設置最大日期？

Question

我正在嘗試在日期選擇器中設置最大日期得到錯誤

我正在使用這個日期選擇器https://www.npmjs.com/package/semantic-ui-calendar-react

render() {
    return (
      <DateInput
        name="date"
        placeholder="Date"
        // this works
        // maxDate={moment()}
       // this is not working
        maxDate={moment().subtract(1,'years')}
        value={this.state.date}
        iconPosition="left"
        onChange={this.handleChange}
      />
    );
  }

這是我的代碼

https://codesandbox.io/s/semantic-ui-example-v9v03

我正在嘗試將最大日期設置為 1 年前

Answer 1

您需要在 [minDate, maxDate] 間隔內設置一個initialDate 。

<DateInput
  maxDate={moment().subtract(1, "years")}
  initialDate={moment().subtract(1, "years")} <==
  value={this.state.date}
/>

演示

來源（不知道為什么他們的文檔中沒有提到這一點）。

Answer 2

new Date(new Date().setDate(new Date().getDate()-365))

此行將返回正好 365 天前的日期。

Answer 3

我不是使用 momment.js 的專家，但根據文檔： https://momentjs.com/guides/#/lib-concepts/mutability/

也許您需要使用.format() 。 我已將其添加到您的代碼框中並且它不會崩潰

Answer 4

如果您設置的范圍為 1 年，您可以執行以下操作，示例：

<DateInput
    maxDate={moment()}
    minDate={moment().subtract(1, "y")}
    value={this.state.date}
/>

Answer 5

Hello please below example:

import React from "react";

import { DateInput } from "semantic-ui-calendar-react";

const currentdate = new Date();
const currentYear = currentdate.getFullYear();
const maxdate = new Date(currentdate.setYear(currentdate.getFullYear() + 1));
class DateTimeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: "",
      time: "",
      dateTime: "",
      datesRange: ""
    };
  }

  handleChange = (event, { name, value }) => {
    if (this.state.hasOwnProperty(name)) {
      this.setState({ [name]: value });
    }
  };

  render() {
    return (
      <DateInput
        dateFormat="DD - MM - YYYY"
        name="date"
        placeholder="Date"
        maxDate={maxdate}
        value={this.state.date}
        iconPosition="left"
        onChange={this.handleChange}
      />
    );
  }
}
export default DateTimeForm;

Answer 6

要在一個月后獲取日期，您可以使用它

 const currentDate = new Date()
  const calculateValidDate = new Date(currentDate.setMonth(currentDate.getMonth() + 1))