如何将react-day-picker的DayPicker关联至已有输入元素并预设选中日期

嘿，我之前也踩过类似的坑！核心问题其实是日期类型不匹配加上没指定日历默认显示的月份，咱们一步步来搞定：

关键问题分析 #

你设置了selectedDays={this.state.selectedDay}但没生效，大概率是这两个原因：

1. 你的selectedDay是输入框里的字符串（比如"Nov 11, 2019"），但react-day-picker的selectedDays只认Date对象，字符串它识别不了，自然不会高亮。
2. 就算你把日期转成了Date对象，日历默认还是显示当前月份，你得手动翻到对应月份才会看到高亮的日期——所以还要给DayPicker指定month属性，让它直接定位到目标日期所在的月份。

具体解决方案步骤 #

1. 确保状态里的日期是Date对象 #

不管是初始化还是用户输入的日期，都要把字符串转换成Date类型。如果原生new Date()解析有兼容性问题（比如某些浏览器对格式敏感），可以用date-fns或者moment这类库来解析，会更可靠。

2. 设置DayPicker的month属性 #

把month设为你的选中日期，这样点击输入框弹出日历的时候，会直接跳转到该日期所在的月份，同时高亮选中的日期。

3. 处理输入框的初始化和更新 #

如果输入框有初始值，组件挂载时就要把它转换成Date对象存入state；如果允许用户手动输入日期，还要在输入变化时尝试解析并更新state，同时处理无效输入的情况。

示例代码（类组件版本，匹配你的写法） #

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
// 如果用date-fns解析，先安装：npm install date-fns
// import { parse, format } from 'date-fns';

class CustomDatePicker extends React.Component {
  constructor(props) {
    super(props);
    // 初始化：把输入框初始值转成Date对象
    let initialSelectedDay = new Date();
    if (props.initialDate) {
      // 原生解析，或者用date-fns的parse：
      // initialSelectedDay = parse(props.initialDate, 'MMM dd, yyyy', new Date());
      initialSelectedDay = new Date(props.initialDate);
    }
    this.state = {
      selectedDay: initialSelectedDay,
      inputValue: props.initialDate || this.formatDate(initialSelectedDay),
      showPicker: false,
    };
  }

  // 把Date对象转成输入框显示的格式（比如Nov 11, 2019）
  formatDate = (date) => {
    // 原生API格式化，或者用date-fns的format：
    // return format(date, 'MMM dd, yyyy');
    return new Intl.DateTimeFormat('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric'
    }).format(date);
  };

  // 解析输入框的字符串为Date对象
  parseInputDate = (inputStr) => {
    const date = new Date(inputStr);
    // 检查是否是有效日期
    return isNaN(date.getTime()) ? null : date;
    // 用date-fns的话更可靠：
    // return parse(inputStr, 'MMM dd, yyyy', new Date());
  };

  handleInputClick = () => {
    this.setState({ showPicker: true });
  };

  handleDaySelect = (day) => {
    const formattedDate = this.formatDate(day);
    this.setState({
      selectedDay: day,
      inputValue: formattedDate,
      showPicker: false,
    });
  };

  handleInputChange = (e) => {
    const inputValue = e.target.value;
    this.setState({ inputValue });
    // 尝试解析输入的日期，更新选中状态
    const parsedDate = this.parseInputDate(inputValue);
    if (parsedDate) {
      this.setState({ selectedDay: parsedDate });
    }
  };

  render() {
    const { selectedDay, inputValue, showPicker } = this.state;
    return (
      <div className="custom-date-picker">
        <input
          type="text"
          value={inputValue}
          onClick={this.handleInputClick}
          onChange={this.handleInputChange}
          placeholder="Select date"
        />
        {showPicker && (
          <DayPicker
            selectedDays={selectedDay}
            // 关键：指定日历默认显示的月份
            month={selectedDay}
            onDayClick={this.handleDaySelect}
            // 可选：如果想限制日期范围，可以加disabledDays等属性
          />
        )}
      </div>
    );
  }
}

export default CustomDatePicker;

额外注意点 #

• 如果用户输入了无效的日期（比如"abc"），解析后会得到null，这时候你可以加个提示，或者让selectedDay保持之前的有效值，避免日历显示异常。
• 如果你用的是函数组件+hooks，逻辑是一样的，只是把state换成useState即可。

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