在移动设备上禁用反应日期选择器的键盘

Question

所以我使用 react-datepicker npm 插件，我试图在点击它时禁用我的手机键盘显示，因为我的手机键盘占据了整个屏幕，所以很难在移动设备上与日期选择器进行交互

这是我的代码：

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;

Answer 1

我今天遇到了同样的问题，并在react-datepicker中发现了一个未解决的问题，其中似乎有一些解决方法。 这个最终为我工作：

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

Answer 2

我使用输入模式属性禁用移动设备上的键盘

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