1

I am using latest React Day Picker. My problem: I cannot find a way to validate user input in DayPickerInput component.

I wish to enable both: calendar selection & user input.

Moreover, I want to allow user select year by input in addition to navigation.

Here is my code

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

What am I missing?

This code works as expected using the calendar

But upon user input handleDayChange recieve day === undefined and no input to check. I think that this is the issue to solve. I could not find how.

Mulli
  • 1,598
  • 2
  • 22
  • 39
  • My best guess is that until user enters a **full** valid date, the `day` variable will be undefined (at least that is how understand it from [docs](http://react-day-picker.js.org/api/DayPickerInput#onDayChange)). Try using third argument to `handleDayChange` (dayPickerInput) and take `dayPickerInput.getInput();` as a value to validate – Ilya Luzyanin Jun 16 '19 at 09:35
  • @IlyaLuzyanin user can enetr *full* wrong date... Only calendar select works. – Mulli Jun 16 '19 at 12:26

0 Answers0