React-Widgets DateTimePicker：如何禁用键盘输入与粘贴，仅保留下拉选择

嘿，我之前刚好遇到过和你一模一样的需求！react-widgets的DateTimePicker确实没有直接提供一个“只禁用输入框交互但保留下拉”的API，不过咱们可以通过几个简单的技巧来实现，完全不用绕远路：

方法一：通过事件监听直接阻止输入和粘贴 #

最直接的方式就是给组件绑定onKeyDown和onPaste事件，手动阻止这些操作的默认行为，这样输入框就没法通过键盘输入或者粘贴内容，但下拉选择的功能完全不受影响。

同时你还可以用minDate、maxDate或者filterDate来限制用户能选择的日期范围，完美匹配你的需求：

import { DateTimePicker } from 'react-widgets';

function RestrictedDateTimePicker() {
  // 阻止所有键盘输入
  const handleKeyDown = (e) => {
    e.preventDefault();
  };

  // 阻止粘贴操作
  const handlePaste = (e) => {
    e.preventDefault();
  };

  // 可选：自定义过滤日期，比如禁用周末
  const filterWeekends = (date) => {
    const day = date.getDay();
    return day !== 0 && day !== 6; // 排除周日和周六
  };

  return (
    <DateTimePicker
      onKeyDown={handleKeyDown}
      onPaste={handlePaste}
      // 限制可选日期范围
      minDate={new Date('2024-01-01')}
      maxDate={new Date('2024-12-31')}
      // 启用自定义日期过滤
      filterDate={filterWeekends}
    />
  );
}

方法二：结合readOnly属性做双重保险 #

如果担心某些特殊键盘事件没被覆盖（比如浏览器的一些快捷键），可以给组件加上readOnly属性，再配合事件阻止，双重保险确保输入框完全不可编辑：

<DateTimePicker
  readOnly
  onKeyDown={(e) => e.preventDefault()}
  onPaste={(e) => e.preventDefault()}
  minDate={new Date('2024-01-01')}
  maxDate={new Date('2024-12-31')}
/>

为什么不用disable？ #

你提到的disable属性会禁用整个组件，包括下拉面板的交互，这显然不是我们想要的。而上面的两种方法只是限制了输入框的手动输入行为，完全保留了下拉选择的功能，同时还能灵活控制可选的日期范围。

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