React datepicker 设置最小和最大日期

Question

我在我的项目中使用了 react-datepicker。
我只需要显示特定月份的天数（比如 2020 年 2 月）。我的印象是我可以将 iso 日期作为 minDate 和 maxDate 传递，但这似乎不起作用。

我的代码：

   const DatePickerMod = () => {
    const [startDate, setStartDate] = useState(null);
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      minDate={'02-01-2020'}
      maxDate={'02-29-2020}
      placeholderText="Select a date in February 2020"
    />
  );
  };

Answer 1

minDate 和 maxDate 是 Date 对象而不是 String.

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  minDate={new Date(2020, 1, 1)}
  maxDate={new Date(2020, 1, 29)}
  placeholderText="Select a date in February 2020"
/>

MDN Date

React DatePicker Documentation

Answer 2

将您的日期（使用该格式）作为字符串传递给 new Date() 实例，如下所示：

 <DatePicker
    selected={startDate}
    onChange={date => setStartDate(date)}
    minDate={new Date("02-01-2020")}
    maxDate={new Date("02-29-2020")}
    placeholderText="Select a date in February 2020"
/>

Answer 3

如果您只想使用输入类型的日期字段，请遵循此

在你的渲染器中这样使用。

<input type="date" name="DOB"  min={minDate} max={today} />

然后像这样在 js 中声明一些变量

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0 so need to add 1 to make it 1!
var yyyy = today.getFullYear();

if (dd < 10) {
    dd = '0' + dd
}

if (mm < 10) {
    mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
var minDate = "1993-05-25"

这将帮助您避免任何外部安装

Answer 4

如果您使用的是 SingleDatePicker 组件而不是 DateRangePicker 组件，则需要使用 isOutsideRange 属性，因为 SingleDatePicker 上不存在 minDate 和 maxDate。

<SingleDatePicker
  standardProps...
  isOutsideRange={(day) => {
    if (minDate) return minDate > day ? true : false;
    if (maxDate) return maxDate < day ? true : false;
    return false;
  }}
/>

React datepicker 设置最小和最大日期

React datepicker set min and max date

javascript

reactjs

react-datepicker