React-datepicker：只有年满18岁才能设置日期

Question

我有一个表单，用户可以在其中提交一些所需的信息

其中一个字段是出生日期

我正在为该特定字段使用 react-datepicker 包

一段代码如下所示：

        <label>
          <DatePicker
            autoComplete='off'
            dateFormatCalendar="MMMM"
            showYearDropdown
            scrollableYearDropdown
            onChange={this.handleChange}
            selected={this.state.formData.dob}
            maxDate={moment().subtract(6570, "days")}
            minDate={moment()}
            placeholderText="Date of birth"
            name="dob"
            customInput={
              <Input type='text' onKeyPress={e => e.preventDefault()} validations={[required]} value={this.state.formData.dob} />
            }
          />
        </label>

6570 = 18*365 是18年换算的天数，我知道这不是一个固定的天数，因为也有364天

这是日期选择器无法选择日期的屏幕截图

https://gyazo.com/4d66a8e59dbca5e79c3af7d6de139d21

有什么想法或建议可以让用户年满 18 岁才能提交表格吗？

谢谢！

Answer 1

此问题可以通过使用特定日期范围示例来解决。

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    minDate={moment().subtract(500, "years")}
    maxDate={moment().subtract(18, "years")}
    showDisabledMonthNavigation
/>

您可以在 codesandbox.io 上查看工作演示。

Answer 2

上面的解决方案对我不起作用，我只是在 moment().subtract(18, "years") 之后添加 ._d 以仅修剪日期。

我的最终代码：

 <DatePicker
        selected={ selectedDate }
        onChange={ date => setSelectedDate(date) }
        dateFormat='dd/MM/yyyy'
        maxDate={moment().subtract(18, 'years')._d}
        showYearDropdown
        scrollableYearDropdown
      />

Answer 3

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    dateFormat="dd/MM/yyyy"
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
    maxDate={subYears(new Date(), 18)}

/>

Answer 4

我知道我来这个帖子有点晚了>但最近我也遇到了这个问题 如果你想设置日期选择器的范围，我想出了这个解决方案

            <DatePicker
              showYearDropdown
              dateFormatCalendar="MMMM"
              yearDropdownItemNumber={150}
              minDate={moment().subtract(150, "years")._d}
              maxDate={moment().subtract(18, "years")._d}
              scrollableYearDropdown
            />

需要添加 Min/Max 和yearDropdownItemNumber 选项才能获得 rangeLocked 响应

我希望它能帮助那些寻找 rangeLock 的人

Answer 5

我设置了最小和最大年龄验证而不使用任何第三方库，例如

moment

。 这就是解决方案。

===功能部分===

const MAX_AGE = 100;
const MIN_AGE = 18;

const getMinAndMaxDateForDob = () => {
    const currenTime = new Date();
    const currentYear = currenTime.getFullYear();
    const currentMonth = currenTime.getMonth();
    const minYear = currentYear - MAX_AGE;
    const maxYear = currentYear - MIN_AGE;
    const minDate = new Date(`${minYear}-${currentMonth}-01`);
    const maxDate = new Date(`${maxYear}-${currentMonth}-01`);
    return {minDate, maxDate};
 }

=== 反应组件部分===

    <DatePicker selected={new Date(state.editedDob)}
       minDate={getMinAndMaxDateForDob().minDate}
       maxDate={getMinAndMaxDateForDob().maxDate}
       dateFormat="yyyy/MM/dd"
       peekNextMonth
       showMonthDropdown
       showYearDropdown
       dropdownMode="select"
       onChange={(date) => setDate(date)}
     />

Answer 6

如果你来这里是为了 React Native，让我为你节省一些时间。道具是：

minimumDate={new Date(moment().subtract(150, "years"))} 

maximumDate={new Date(moment().subtract(18, "years"))}