使用react-datepicker时如何禁用移动端点击唤起的系统键盘

要禁用react-datepicker点击时的移动端系统键盘弹出，只需给组件传入inputProps参数，为内部原生输入框设置readOnly属性即可，该方案不会影响日期选择器的正常弹出、选择交互，也不会破坏占位符的展示效果。

修改后的完整代码如下：

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"
        inputProps={{
          readOnly: true
        }}
        />
    </div>
  );
};
export default Example;

补充说明 #

• 你代码中已经添加的disabledKeyboardNavigation属性可以和上述配置完美兼容，进一步禁用键盘导航操作，更适配移动端纯点击交互的场景
• 如果不想使用readOnly属性，也可以给组件添加onFocus={(e) => e.target.blur()}属性，输入框获得焦点时主动失焦，也能达到阻止键盘弹出的效果，兼容性略低于readOnly方案

内容的提问来源于stack exchange，提问作者Phakamani Xulu