4

我正在使用 react-date-picker，但在移动设备上，单击时会显示本机键盘，导致日期选择器在顶部打开，这看起来不太好。在线解决方案是将只读属性放在日期选择器绑定的输入字段上。但是 read-date-picker 组件不会让我通过那个道具......

有什么好的解决方案吗？

4

8 回答 8

8

这readOnly是防止浏览器在移动设备上显示键盘和打字的好选择。使用该readonly集合，您仍然可以在其上启动点击事件。

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

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

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

当前的解决方法

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

 componentDidMount() {
    const datePickers = document.getElementsByClassName("react-datepicker__input-container");
    Array.from(datePickers).forEach((el => el.childNodes[0].setAttribute("readOnly", true)))
};
于 2019-09-03T16:39:37.503 回答
4

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

const pickerRef = useRef(null)

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

return (<DatePicker ref={pickerRef} ... />)
于 2020-05-20T10:04:44.747 回答
2

所以我最终在 componentDidMount 生命周期中修改了输入元素，就像这样；

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

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

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

不过，我欢迎其他解决方案。

于 2018-02-15T10:38:22.157 回答
1 
<DatePicker
. . . . .
onFocus={(e) => e.target.readOnly = true}
/>

这对我有用。

于 2021-10-04T18:04:37.773 回答
1

Caroline Waddell 回答的一个变体让我在 react-datepicker 上畅通无阻2.8.0。日期选择器元素的date-picker-inputid 在通过 id 获取后修改属性：

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

如果页面上有多个，对我有用input。

于 2019-12-18T17:08:12.117 回答
0

Reactdatepicker有 className react-datepicker__input-container。所以

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

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

for (let i = 0; i < datePickers.length; i++) {
      datePickers[i].childNodes[0].setAttribute("readonly", true);
    }
于 2020-07-27T17:59:16.293 回答
0

自己打这个。使用一个按钮创建一个自定义输入，该按钮使用所选值的文本打开选择器。

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

return (
  <ReactDatePicker
     selected={fieldValue}
    ...
     customInput = {<ReadonlyInput />}
   />
)
于 2020-05-26T05:58:08.190 回答
0

我使用了类似 onChangeRaw={(e)=>handleDateChangeRaw(e)} 的东西，它允许我禁用键盘类型选项并制作光标指针。

 const handleDateChangeRaw = (e:React.FormEvent<HTMLInputElement>) => {
        e.preventDefault();
      }

           <DatePicker                
                selected={(value && new Date(value)) || null}
               onChange={val => { onChange(name, val); }}
                dateFormat={ dateFormat }
                minDate={new Date()}
                timeIntervals={1}
                onChangeRaw={(e)=>handleDateChangeRaw(e)}
                />  
    .react-datepicker__input-container input {
       cursor: pointer;
    }
于 2021-11-26T19:45:46.770 回答