CODEWITHSUNDEEP
javascriptreactjs
Yasiru Attanayake
Yasiru Attanayake

Reputation: 111

How to disable keyboard appearing on mobile : React date time picker

I'm using React-date-picker for my Reactjs App.When i tested date picker option on mobile,keyboard also appearing. i tried some this.but it is not solve my issue.

<DatePicker  onChange={this.bidHandleChangeStart} 
value={this.state.startDate} name="startDate" maxDate={new Date()}  customInput={<CustomInput />} />

const CustomInput = React.forwardRef((props,ref) => {
    return (
        <input
            readOnly={true}
        />
    )
})

Upvotes: 3

Views: 1782

Answers (3)

syjsdev
syjsdev

Reputation: 1336

I had the same problem in the past and fixed by @Oleg.

Here is an example. I think it's helpful to you.

import { Keyboard } from 'react-native';

...
<Input caretHidden onFocus={(e) => Keyboard.dismiss()} />
...

Upvotes: 0

Minty
Minty

Reputation: 313

Try forcing the blur when receiving focus. I don't know React but something like:-

onFocus={this.blur()}

Upvotes: 1

hong developer
hong developer

Reputation: 13906

You can solve the problem using the keyboard module.

Example

import {Keyboard} from 'react-native';
...
  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
  }

  _keyboardDidShow() {
    alert('Keyboard Shown');
    Keyboard.dismiss()
  }

Upvotes: 2

Related Questions