CODEWITHSUNDEEP
reactjsreact-datepicker
Phakamani Xulu
Phakamani Xulu

Reputation: 259

Disable keyboard on mobile device for react-datepicker

So im using the react-datepicker npm plugin and I'm trying to disable my mobile phone keyboard from showing when I click on it because my phones keyboard takes up the whole screen so it's hard to interact the datepicker on mobile

this is my code:

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import Label from './Label';
import PropTypes from 'prop-types';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';


const Example = (props) => {
  const [startDate, setStartDate] = useState(null);
  
  return (
    <div className="customDatePickerWidth">
      <Label className={props.className} text={props.label}></Label>
      <DatePicker 
       
        className={""+props.class} selected={startDate} 
        onChange={date => setStartDate(date)} 
        disabledKeyboardNavigation
        placeholderText="dd/mm/yyyy"

        />
    </div>
  );
};
export default Example;

Upvotes: 1

Views: 3461

Answers (2)

amir hossein hayati
amir hossein hayati

Reputation: 11

I Use Inputmode Attribute To Disable keyboard On Mobile Device

<DatePicker 
   inputmode='none' // <--- Adding this
/>

Upvotes: 1

Richard Albayaty
Richard Albayaty

Reputation: 131

I had this same problem today and discovered an open issue in react-datepicker where there seem to be a few work arounds. This one ended up working for me:

  <DatePicker 
    className={""+props.class} selected={startDate} 
    onChange={date => setStartDate(date)} 
    disabledKeyboardNavigation
    placeholderText="dd/mm/yyyy"
    onFocus={e => e.target.blur()} // <--- Adding this
  />

Upvotes: 12

Related Questions