Javascript 如何在日期中添加一年的选择？

在使用

react dates

到达正确的年份之前，刷月份是一件痛苦的事情，是否可以为年份/月份添加一些选择？

是的，这是可能的，因为版本react-dates@17.0.0！（）

npm安装响应-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}
    />
}

从“React”导入React；
从“力矩”中导入力矩；
从“反应日期”导入{SingleDatePicker}；
类Main扩展了React.Component{
状态={
日期：矩（），
重点：对
}
renderMonthElement=（{month，onMonthSelect，onYearSelect}）=>
onMonthSelect（月，e.target.value）}
>
{moment.months（）.map（（标签，值）=>(
{label}
))}
onYearSelect（月，例如target.value）}>
去年
{moment（）.year（）}
明年
渲染=（）=>
this.setState（{date}）
聚焦={this.state.focused}
onFocusChange={（{focused}）=>this.setState（{focused}）
renderMonthElement={this.renderMonthElement}
/>
}

---

要稍微调整@lakesare的答案，让那些想要列出过去100年的生日，这里有一个代码片段：

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}
        />
    )
}

renderMonthElement=（{month，onMonthSelect，onYearSelect}）=>{
让我
让我们看看年份=[]
对于（i=moment（）.year（）；i>=moment（）.year（）-100；i--）{
年。推送（{i}）
}
返回(
onMonthSelect（月，例如target.value）}>
{moment.months（）.map（（标签，值）=>(
{label}
))}
onYearSelect（月，例如target.value）}>
{年}
)
}
render（）{
返回(
)
}

---

修改第4行的for循环，打印出您需要的年份。

如果有人不确定：是