CODEWITHSUNDEEP
reactjs
James
James

Reputation: 3815

React-Widgets DateTimePicker: Prevent keyboard input or copy pasting

I am trying to use the DateTimePicker component from react-widgets

Is it possible to disable keyboard input (and copy pasting) for the DateTimePicker input field and only constrain dropdown selection.

The disable API disables everything, including the dropdown selection menu. My intent is to constraint which values the user is allowed to select, and I can only do it from the dropdown menu.

Upvotes: 2

Views: 2206

Answers (2)

Irene
Irene

Reputation: 26

I solved it by handling onChangeRaw that listens for changes on the input and setting the current field value to empty string.

<DatePicker
  value={this.state.startDate}
  onChangeRaw={event =>
      this.setState({startDate: ''})}
  onChange={value =>
      this.setState({startDate: value})}
/>

Upvotes: 0

mpontus
mpontus

Reputation: 2203

Try this: 

<DateTimePicker
  inputProps={{
    component: props => <input {...props} readOnly />
  }}
/>

There's an active issue in react-widgets repo to allow to set readOnly for just the input, which would accomplish this task more elegantly.

Upvotes: 6

Related Questions