React-datepicker: 只有 18 岁及以上才可以设置日期
React-datepicker: enable to set date only if it 18 years old and above
我有一个表单,用户可以在其中提交一些所需的信息
其中一个字段是出生日期
我正在为该特定领域使用 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 岁的用户提交表单吗?
谢谢!
可以使用 Specific date range 示例解决此问题。
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().subtract(500, "years")}
maxDate={moment().subtract(18, "years")}
showDisabledMonthNavigation
/>
您可以在 codesandbox.io 上查看工作演示。
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
dateFormat="dd/MM/yyyy"
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={subYears(new Date(), 18)}
/>
上面的解决方案对我不起作用,我只是在 moment().subtract(18, "years") 之后添加 ._d 到 trim 只有日期。
我的最终代码:
<DatePicker
selected={ selectedDate }
onChange={ date => setSelectedDate(date) }
dateFormat='dd/MM/yyyy'
maxDate={moment().subtract(18, 'years')._d}
showYearDropdown
scrollableYearDropdown
/>
如果你来这里是为了 React Native,让我为你节省一些时间。道具是:
minimumDate={new Date(moment().subtract(150, "years"))}
maximumDate={new Date(moment().subtract(18, "years"))}
我知道我来晚了一点 > 但最近我也遇到了这个问题
如果你想为日期选择器设置一个范围,我想出了这个解决方案
<DatePicker
showYearDropdown
dateFormatCalendar="MMMM"
yearDropdownItemNumber={150}
minDate={moment().subtract(150, "years")._d}
maxDate={moment().subtract(18, "years")._d}
scrollableYearDropdown
/>
Min/Max 需要添加 yearDropdownItemNumber 选项才能获得 rangeLocked 响应
希望对寻找 rangeLock 的人有所帮助
我有一个表单,用户可以在其中提交一些所需的信息
其中一个字段是出生日期
我正在为该特定领域使用 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 岁的用户提交表单吗?
谢谢!
可以使用 Specific date range 示例解决此问题。
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().subtract(500, "years")}
maxDate={moment().subtract(18, "years")}
showDisabledMonthNavigation
/>
您可以在 codesandbox.io 上查看工作演示。
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
dateFormat="dd/MM/yyyy"
showMonthDropdown
showYearDropdown
dropdownMode="select"
maxDate={subYears(new Date(), 18)}
/>
上面的解决方案对我不起作用,我只是在 moment().subtract(18, "years") 之后添加 ._d 到 trim 只有日期。
我的最终代码:
<DatePicker
selected={ selectedDate }
onChange={ date => setSelectedDate(date) }
dateFormat='dd/MM/yyyy'
maxDate={moment().subtract(18, 'years')._d}
showYearDropdown
scrollableYearDropdown
/>
如果你来这里是为了 React Native,让我为你节省一些时间。道具是:
minimumDate={new Date(moment().subtract(150, "years"))}
maximumDate={new Date(moment().subtract(18, "years"))}
我知道我来晚了一点 > 但最近我也遇到了这个问题 如果你想为日期选择器设置一个范围,我想出了这个解决方案
<DatePicker
showYearDropdown
dateFormatCalendar="MMMM"
yearDropdownItemNumber={150}
minDate={moment().subtract(150, "years")._d}
maxDate={moment().subtract(18, "years")._d}
scrollableYearDropdown
/>
Min/Max 需要添加 yearDropdownItemNumber 选项才能获得 rangeLocked 响应
希望对寻找 rangeLock 的人有所帮助