React-datepicker：仅在 18 岁及以上时启用设置日期答案

【问题标题】：React-datepicker: enable to set date only if it 18 years old and aboveReact-datepicker：仅在 18 岁及以上时启用设置日期
【发布时间】：2018-10-11 12:18:20
【问题描述】：

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

其中一个字段是出生日期

我正在为该特定字段使用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 岁才能提交表单？

谢谢！

【问题讨论】：

您应该检查所选日期是否超过 18 岁
@AseemUpadhyay 我试图在特定的日期选择器中禁用用户。我已经尝试过您的解决方案，它对我有用，但我只需要在 datepicker 中限制日期

标签： reactjs momentjs react-datepicker

【解决方案1】：

使用Specific date range 示例可以解决此问题。

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

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

【讨论】：

【解决方案2】：

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

/>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。

【解决方案3】：

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

我的最终代码：

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

【讨论】：

【解决方案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 的人有所帮助

【讨论】：

【解决方案5】：

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

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

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

【讨论】：