0

我正在使用最新的 React Day Picker。我的问题：我找不到在DayPickerInput组件中验证用户输入的方法。

我希望同时启用：日历选择和用户输入。

此外，除了导航之外，我还希望允许用户通过输入选择年份。

这是我的代码

const hDays = ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש']

export class CalendarDay extends React.Component{
  constructor(props) {
    super(props)
    this.state = { selectedDay: undefined, inValid: false }
    this.handleDayChange = this.handleDayChange.bind(this)
  }
  handleDayChange(day){
    const { tpc } = this.props

    if (day === undefined)
      return this.setState({ inValid:true })

    this.setState({ selectedDay: day, inValid:false })
    let d = day.getDate() + "/" + (day.getMonth()+1) + "/" + day.getFullYear()
    //console.log("date= ", d)
    this.props.handleChangeDate(d, tpc.name)
  }
  render(){
    var value = this.props.value
    var cn = this.state.inValid ? {className: "date-input-invalid"} : {}
    return (
      <DayPickerInput  
          locale={'he'}
          weekdaysShort={hDays}
          formatDate={formatDate}
          parseDate={parseDate}
          format="DD/MM/YYYY"
          placeholder= 'DD/MM/YYYY' // {`${formatDate(new Date())}`}
          firstDayOfWeek={1}

          value = {value}
          dayPickerProps={{localeUtils: MomentLocaleUtils, locale:"he"}}
          inputProps={cn}
          onDayChange={this.handleDayChange}
      />
    )
  }
}

我错过了什么？

此代码使用日历按预期工作

但是在用户输入时handleDayChange收到day === undefined并且没有输入要检查。我认为这是需要解决的问题。我找不到如何。

4

0 回答 0