React-Day-Picker 输入框绑定指南：实现优雅的日期选择交互-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00496/article/details/148467886

React-Day-Picker 输入框绑定指南：实现优雅的日期选择交互

react-day-picker DayPicker is a customizable date picker component for React, with native TypeScript support. 项目地址: https://gitcode.com/gh_mirrors/re/react-day-picker

前言

在现代Web应用中，日期选择是一个常见的交互需求。React-Day-Picker作为一款轻量级、可定制的React日期选择组件，提供了强大的功能来满足各种日期选择场景。本文将深入探讨如何将React-Day-Picker与输入框进行绑定，实现流畅的日期选择体验。

原生日期选择器的局限性

浏览器提供了原生日期选择器（如<input type="date">），但它们存在几个明显缺点：

跨浏览器样式不一致
自定义选项有限
功能扩展性差
部分浏览器支持不完整

React-Day-Picker则提供了完全可控的解决方案，允许开发者：

自定义UI样式
添加复杂交互逻辑
确保跨浏览器一致性
实现高级无障碍支持

基础实现：内联日历绑定

核心概念

实现输入框与日历绑定的关键在于维护三个状态：

当前显示的月份（控制日历视图）
选中的日期（同步选择状态）
输入框的值（用户输入与显示）

代码实现解析

import { useId, useState } from "react";
import { format, isValid, parse } from "date-fns";
import { DayPicker } from "react-day-picker";

export function Input() {
  const inputId = useId();
  const [month, setMonth] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
  const [inputValue, setInputValue] = useState("");

  // 处理日历选择
  const handleDayPickerSelect = (date: Date | undefined) => {
    if (!date) {
      setInputValue("");
      setSelectedDate(undefined);
    } else {
      setSelectedDate(date);
      setMonth(date); // 同步月份视图
      setInputValue(format(date, "MM/dd/yyyy"));
    }
  };

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
    const parsedDate = parse(e.target.value, "MM/dd/yyyy", new Date());
    
    if (isValid(parsedDate)) {
      setSelectedDate(parsedDate);
      setMonth(parsedDate); // 同步月份视图
    } else {
      setSelectedDate(undefined);
    }
  };

  return (
    <div>
      <label htmlFor={inputId}>Date: </label>
      <input
        id={inputId}
        type="text"
        value={inputValue}
        placeholder="MM/dd/yyyy"
        onChange={handleInputChange}
      />
      <DayPicker
        month={month}
        onMonthChange={setMonth}
        mode="single"
        selected={selectedDate}
        onSelect={handleDayPickerSelect}
      />
    </div>
  );
}

关键点说明

双向绑定：实现了输入框和日历的双向数据同步
日期解析：使用date-fns的parse和isValid函数处理用户输入
月份控制：通过month状态确保日历视图与当前操作保持一致
无障碍：使用useId生成唯一ID，确保label与input正确关联

进阶实现：对话框式日期选择器

对话框式选择器更适合空间有限的场景，但需要特别注意无障碍访问。

实现要点

对话框管理：使用HTML5的<dialog>元素或第三方模态框
焦点管理：确保键盘导航符合无障碍标准
状态同步：保持对话框内外状态的同步
滚动锁定：防止背景内容滚动

核心代码解析

import { useEffect, useId, useRef, useState } from "react";
import { format, isValid, parse } from "date-fns";
import { DayPicker } from "react-day-picker";

export function Dialog() {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  
  // 控制对话框显示/隐藏
  const toggleDialog = () => setIsDialogOpen(!isDialogOpen);

  // 处理滚动锁定
  useEffect(() => {
    const handleBodyScroll = (isOpen: boolean) => {
      document.body.style.overflow = isOpen ? "hidden" : "";
    };
    if (!dialogRef.current) return;
    
    if (isDialogOpen) {
      handleBodyScroll(true);
      dialogRef.current.showModal();
    } else {
      handleBodyScroll(false);
      dialogRef.current.close();
    }
    
    return () => handleBodyScroll(false);
  }, [isDialogOpen]);

  // 日期选择处理（与内联版本类似）
  const handleDayPickerSelect = (date: Date | undefined) => {
    // ...日期处理逻辑
    dialogRef.current?.close(); // 选择后自动关闭
  };

  return (
    <div>
      {/* 输入框和按钮 */}
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      <button
        onClick={toggleDialog}
        aria-label="Open calendar to choose date"
      >
        📆
      </button>
      
      {/* 对话框内容 */}
      <dialog
        ref={dialogRef}
        onClose={() => setIsDialogOpen(false)}
      >
        <DayPicker
          autoFocus // 自动聚焦确保键盘可操作
          mode="single"
          selected={selectedDate}
          onSelect={handleDayPickerSelect}
        />
      </dialog>
    </div>
  );
}