React-Datepicker如何模拟原生日期输入框的占位符与分隔符持久显示行为？

嘿，我太懂你这种需求了！刚从原生<input type="date">转用react-datepicker，肯定会想念那种输入时分隔符和占位符稳稳待在那儿的原生体验——输入数字时dd/mm/yyyy的框架不会消失，填完日自动跳到月份，分隔符/始终都在，超顺手对吧？

其实react-datepicker本身默认没这个功能，但它支持自定义输入组件，咱们可以自己实现这个效果，同时还能保留它禁用周末、假期的核心功能。下面给你一步步说怎么做：

• 核心思路：自定义输入组件接管显示与输入逻辑
  react-datepicker提供了customInput属性，允许我们替换默认的输入框。咱们可以写一个自定义输入组件，自己维护输入的显示格式，确保占位符和分隔符始终可见。

• 具体代码实现
  先来看完整的示例代码，我会给你拆解说关键点：

  首先导入必要的模块：

  import React, { useState, useEffect, useRef } from 'react';
  import DatePicker from 'react-datepicker';
  import 'react-datepicker/dist/react-datepicker.css';
  

  然后写自定义输入组件：

  const PersistentPlaceholderInput = ({ value, onChange, onClick }) => {
    const [displayText, setDisplayText] = useState('dd/mm/yyyy');
    const inputRef = useRef(null);
  
    // 当选中的日期变化时，同步更新显示的文本
    useEffect(() => {
      if (value) {
        const day = value.getDate().toString().padStart(2, '0');
        const month = (value.getMonth() + 1).toString().padStart(2, '0');
        const year = value.getFullYear().toString();
        setDisplayText(`${day}/${month}/${year}`);
      } else {
        setDisplayText('dd/mm/yyyy');
      }
    }, [value]);
  
    const handleInputChange = (e) => {
      // 只保留输入的数字，过滤掉非数字字符
      const rawInput = e.target.value.replace(/\D/g, '');
      let newDisplayText = '';
  
      // 按dd/mm/yyyy的格式分段处理，保留占位符
      if (rawInput.length <= 2) {
        // 正在输入日部分
        newDisplayText = `${rawInput.padEnd(2, 'd')}/mm/yyyy`;
      } else if (rawInput.length <= 4) {
        // 正在输入月份部分
        const dayPart = rawInput.slice(0, 2);
        const monthPart = rawInput.slice(2, 4).padEnd(2, 'm');
        newDisplayText = `${dayPart}/${monthPart}/yyyy`;
      } else if (rawInput.length <= 8) {
        // 正在输入年份部分
        const dayPart = rawInput.slice(0, 2);
        const monthPart = rawInput.slice(2, 4);
        const yearPart = rawInput.slice(4, 8).padEnd(4, 'y');
        newDisplayText = `${dayPart}/${monthPart}/${yearPart}`;
      }
  
      setDisplayText(newDisplayText);
  
      // 当输入完整8位数字时，解析成合法日期传给DatePicker
      if (rawInput.length === 8) {
        const day = parseInt(rawInput.slice(0, 2), 10);
        const month = parseInt(rawInput.slice(2, 4), 10) - 1; // 注意月份是0基的
        const year = parseInt(rawInput.slice(4, 8), 10);
        const parsedDate = new Date(year, month, day);
        // 验证日期是否合法
        if (!isNaN(parsedDate.getTime()) && parsedDate.getFullYear() === year) {
          onChange(parsedDate);
        }
      } else if (rawInput.length === 0) {
        // 清空输入时重置日期
        onChange(null);
      }
    };
  
    // 可选：优化光标位置，输入完一段自动跳到下一段
    useEffect(() => {
      if (inputRef.current) {
        const cursorPos = inputRef.current.value.indexOf('d') || inputRef.current.value.indexOf('m') || inputRef.current.value.indexOf('y');
        if (cursorPos !== -1) {
          inputRef.current.setSelectionRange(cursorPos, cursorPos);
        }
      }
    }, [displayText]);
  
    return (
      <input
        ref={inputRef}
        type="text"
        value={displayText}
        onChange={handleInputChange}
        onClick={onClick} // 点击时打开日期选择器弹窗
      />
    );
  };
  

  最后在主组件里使用这个自定义输入：

  const DatePickerWithNativeFeel = () => {
    const [selectedDate, setSelectedDate] = useState(null);
  
    // 这里实现禁用周末和英国银行假期的逻辑
    const isDisabledDate = (date) => {
      // 先禁用周末
      const dayOfWeek = date.getDay();
      const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
  
      // 再添加英国银行假期的判断，示例里先放几个假日期，你可以替换成完整的假期列表
      const ukBankHolidays = [
        new Date(2024, 0, 1), // 新年
        new Date(2024, 2, 29), // 复活节周一
        // 其他假期可以继续添加
      ];
      const isBankHoliday = ukBankHolidays.some(holiday => 
        holiday.getDate() === date.getDate() &&
        holiday.getMonth() === date.getMonth() &&
        holiday.getFullYear() === date.getFullYear()
      );
  
      return isWeekend || isBankHoliday;
    };
  
    return (
      <div style={{ margin: '20px' }}>
        <DatePicker
          selected={selectedDate}
          onChange={(date) => setSelectedDate(date)}
          customInput={<PersistentPlaceholderInput />}
          filterDate={(date) => !isDisabledDate(date)}
          dateFormat="dd/MM/yyyy"
        />
      </div>
    );
  };
  
  export default DatePickerWithNativeFeel;
  

• 关键细节说明

  • 自定义输入组件通过displayText状态维护显示的内容，始终保留dd/mm/yyyy的格式框架，用户输入的数字会替换对应的占位符，未输入的部分还是显示d/m/y
  • 用正则过滤掉非数字输入，确保只有数字能被处理，避免格式混乱
  • 当输入完整8位数字时，会解析成合法的Date对象，传给react-datepicker的onChange，同时验证日期有效性，防止无效日期被选中
  • 可选的光标位置优化，让用户输入完日之后自动跳到月份部分，和原生体验更贴近
  • 禁用日期的逻辑完全保留，你可以继续扩展isDisabledDate函数，加入所有英国银行假期的判断

这样调整后，你的react-datepicker就能完美模拟原生输入框的占位符和分隔符持久显示的效果，同时还能满足禁用特定日期的需求，一举两得！

内容来源于stack exchange