Question

我使用的是react-date-picker，但在移动设备上，点击时会显示原生键盘，导致日期选择器在顶部打开，看起来并不好看。在线解决方案是将readonly属性放在日期选择器绑定的输入字段上。但读取日期选择器组件不允许我通过该支柱...

对此有什么好的解决方案吗？

Answer 1

readOnly是防止浏览器显示键盘和在移动设备上键入内容的好选择。设置了readonly后，您仍然可以在其上启动点击事件。

在谈论react-date-picker模块时，这在非移动设备中也很有用。

可以添加选项readOnly={true}，但是它将完全禁用所有设备上的日期选择器输入，正如我们在以下问题上所看到的：

此外，您将需要处理onClick事件，我认为这不是一个好主意。

当前解决方法

目前，使键盘在移动设备上禁用并为所有datePickers输入设置readOnly的解决方案将是在组件componentDidMount事件上编辑输入属性：

 componentDidMount() {
    const datePickers = document.getElementsByClassName("react-datepicker__input-container");
    Array.from(datePickers).forEach((el => el.childNodes[0].setAttribute("readOnly", true)))
};

Answer 2

所以我最终修改了componentDidMount生命周期中的input-element，就像这样;

document.getElementsByTagName("input")[0].setAttribute("readonly", "readonly");

这可以防止手机上的原生视觉键盘显示。但是当它悬停输入字段时，它会在桌面上创建这个“不允许的”红色丑陋光标，所以我通过定位我的日期选择器输入来修复它。

.react-datepicker-wrapper input[readonly]{cursor: pointer;}

我欢迎替代解决方案。

Answer 3

使用React钩子的可行解决方案

const pickerRef = useRef(null)

useEffect(() => {
    if (isMobile && pickerRef.current !== null) {
      pickerRef.current.input.readOnly = true;
    }
}, [isMobile, pickerRef]);

return (<DatePicker ref={pickerRef} ... />)

Answer 4

Caroline Waddell回答的一种变体使我在react-datepicker 2.8.0上畅通无阻。日期选择器元素的ID为date-picker-input，因此在通过ID获得属性后修改属性：

componentDidMount() {
    document.getElementById('date-picker-input').setAttribute('readonly', 'readonly');
  }

如果您的页面上有多个input，请帮我个忙。

Answer 5

我自己就打这个。使用按钮创建自定义输入，该按钮将打开选择器并显示所选值的文本。

const ReadonlyInput = ({ value, onClick }: any) => (
  <button onClick={onClick}>
    {value}
  </button>
);

return (
  <ReactDatePicker
     selected={fieldValue}
    ...
     customInput = {<ReadonlyInput />}
   />
)

Answer 6

反应datepicker的类名称为react-datepicker__input-container。所以

const datePickers = document.getElementsByClassName(
      "react-datepicker__input-container"
    );

这将返回一个HTML collection，需要将其转换为数组。您可以使用Array.from，但是IE 11中不支持此功能。因此，最好使用本机for loop。所以

for (let i = 0; i < datePickers.length; i++) {
      datePickers[i].childNodes[0].setAttribute("readonly", true);
    }

使用react-date-picker时，在移动设备上隐藏原生键盘

6 个答案:

当前解决方法