如何关闭react-date-picker日期输入框首次点击时的自动选中功能

以下是两种可行的解决方案，替代你之前尝试的CSS方法：

• 方案1：通过inputProps传递事件清除选区
  react-date-picker允许通过inputProps向内部输入框传递属性，我们可以绑定onFocus事件手动清除文本选中状态：

import DatePicker from 'react-date-picker';

function MyDatePicker() {
  const handleInputFocus = () => {
    // 延迟执行确保覆盖组件默认的选中逻辑
    setTimeout(() => {
      window.getSelection().removeAllRanges();
    }, 0);
  };

  return (
    <DatePicker
      inputProps={{
        onFocus: handleInputFocus
      }}
    />
  );
}

使用setTimeout是因为组件内部的选中逻辑可能在focus事件之后触发，延迟0毫秒能保证我们的清除操作在其后执行。

• 方案2：自定义输入组件完全控制行为
  如果方案1效果不佳，可以用renderInput prop自定义输入框，彻底掌控输入框的交互逻辑：

import DatePicker from 'react-date-picker';
import { useState } from 'react';

function MyDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const renderCustomInput = ({ value, onClick }) => {
    return (
      <input
        type="text"
        value={value}
        onClick={(e) => {
          onClick(e);
          window.getSelection().removeAllRanges();
        }}
        onFocus={() => {
          window.getSelection().removeAllRanges();
        }}
      />
    );
  };

  return (
    <DatePicker
      value={selectedDate}
      onChange={setSelectedDate}
      renderInput={renderCustomInput}
    />
  );
}

这种方式直接替换默认输入组件，从根源上避免自动选中的问题。

注：你之前尝试的CSS方法无效，因为文本自动选中是组件JS逻辑或浏览器默认行为，CSS仅能控制样式，无法干预这类交互行为。

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