2

I am using react date-picker and I have a problem on mobile view. The virtual keyboard hides part of my date picker. Any advise?

<DatePicker
      className={css.datePicker}
      todayButton={'Today'}
      selected={date}
      onChange={this.changeHandler}
      onBlur={this.handleBlur}
      name={this.props.name}
      minDate={this.store.state.searchParameters.Arrival}
      disabledKeyboardNavigation
      withPortal={isMobileView}
      onChangeRaw={e => e.preventDefault()}
      onFocus={e => e.preventDefault()}
      onKeyDown={e => e.preventDefault()}/>

thnx

Wasyster
  • 2,279
  • 4
  • 26
  • 58
  • Possible duplicate of [Hide native keyboard on mobile when using react-date-picker](https://stackoverflow.com/questions/48805053/hide-native-keyboard-on-mobile-when-using-react-date-picker) – valdeci Sep 03 '19 at 16:24

2 Answers2

1

this worked for me! I put it in the wrapper component as in componenetDidMount().

Wasyster
  • 2,279
  • 4
  • 26
  • 58
1
handleDateChangeRaw = (e) => {
  e.preventDefault();
}

...

render() {
  ...
  <DatePicker onChangeRaw={this.handleDateChangeRaw} ... />
  ...
}

Here is the source

Roshin Jay
  • 659
  • 1
  • 6
  • 12