在我到达正确的年份之前向右滑动几个月很痛苦react-dates
,是否可以为年/月添加一些选择?
如何在react日期中添加一年的选择?
IT技术
javascript
reactjs
calendar
react-dates
2021-05-03 00:14:05
2个回答
是的,这是可能的,因为版本react-dates@17.0.0!(相关拉取请求)。
npm install react-dates@latest
- 您可能需要根据文档更新一些内容,因为发生了重大变化(对我来说主要是 css)。
然后利用新引入的
renderMonthElement
prop 编写自定义的月份和年份选择器,例如:import React from 'react'; import moment from 'moment'; import { SingleDatePicker } from 'react-dates'; class Main extends React.Component { state = { date: moment(), focused: true } renderMonthElement = ({ month, onMonthSelect, onYearSelect }) => <div style={{ display: 'flex', justifyContent: 'center' }}> <div> <select value={month.month()} onChange={(e) => onMonthSelect(month, e.target.value)} > {moment.months().map((label, value) => ( <option value={value}>{label}</option> ))} </select> </div> <div> <select value={month.year()} onChange={(e) => onYearSelect(month, e.target.value)}> <option value={moment().year() - 1}>Last year</option> <option value={moment().year()}>{moment().year()}</option> <option value={moment().year() + 1}>Next year</option> </select> </div> </div> render = () => <SingleDatePicker date={this.state.date} onDateChange={(date) => this.setState({ date })} focused={this.state.focused} onFocusChange={({ focused }) => this.setState({ focused })} renderMonthElement={this.renderMonthElement} /> }
为了稍微调整那些想要列出过去 100 年生日的人的@lakesare 答案,这里有一个代码片段:
renderMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
let i
let years = []
for(i = moment().year(); i >= moment().year() - 100; i--) {
years.push(<option value={i} key={`year-${i}`}>{i}</option>)
}
return (
<div style={{ display: "flex", justifyContent: "center" }}>
<div>
<select value={month.month()} onChange={e => onMonthSelect(month, e.target.value)}>
{moment.months().map((label, value) => (
<option value={value} key={value}>{label}</option>
))}
</select>
</div>
<div>
<select value={month.year()} onChange={e => onYearSelect(month, e.target.value)}>
{years}
</select>
</div>
</div>
)
}
render() {
return (
<SingleDatePicker
...
renderMonthElement={this.renderMonthElement}
/>
)
}
修改第 4 行的 for 循环以打印出您需要的任何年份。
其它你可能感兴趣的问题