如何使用date-fns为NextUI DatePicker设置日期值？

NextUI的DatePicker默认依赖@internationalized/date的DateValue类型，但完全可以通过自定义格式化、解析函数结合date-fns实现需求，无需引入该库。

解决步骤与完整代码 #

"use client";

import React, { useState } from "react";
import { DatePicker } from "@nextui-org/react";
import { startOfToday, format, parseISO, isValid } from "date-fns";

interface Props {
    label?: string;
}

export function CustomDatePicker({ label }: Props) {
    // 用原生Date作为状态存储，避免依赖@internationalized/date类型
    const [selectedDate, setSelectedDate] = useState<Date | null>(startOfToday());

    // 自定义日期格式化：将DatePicker内部的DateValue转为显示用字符串（date-fns处理）
    const formatDisplayDate = (dateValue: any) => {
        const isoString = dateValue.toISO();
        return format(new Date(isoString), "yyyy-MM-dd");
    };

    // 自定义日期解析：将用户输入的字符串转为原生Date（date-fns校验有效性）
    const parseInputDate = (value: string) => {
        const parsedDate = parseISO(value);
        return isValid(parsedDate) ? parsedDate : null;
    };

    // 处理选择变化：将DatePicker返回的DateValue转为原生Date
    const handleDateChange = (dateValue: any) => {
        if (dateValue?.toISO) {
            const isoString = dateValue.toISO();
            setSelectedDate(new Date(isoString));
        } else {
            setSelectedDate(null);
        }
    };

    return (
        <DatePicker
            label={label}
            variant="bordered"
            value={selectedDate}
            onChange={handleDateChange}
            // 配置自定义格式化规则
            formatters={{ date: formatDisplayDate }}
            // 配置自定义输入解析规则
            parseDate={parseInputDate}
            placeholder="YYYY-MM-DD"
        />
    );
}

关键说明 #

1. 状态存储：直接用原生Date类型维护选中日期，脱离对@internationalized/date的依赖。
2. 格式化适配：通过formatters.date将DatePicker内部的DateValue类型转为原生Date，再用date-fns的format生成显示字符串。
3. 输入解析：parseDate函数负责将用户手动输入的日期字符串，通过date-fns的parseISO和isValid转为合法的原生Date。
4. ** onChange转换**：将DatePicker返回的DateValue通过toISO()方法转为ISO字符串，再实例化为原生Date存入状态。

这种方式完全基于date-fns处理日期逻辑，无需引入@internationalized/date即可正常使用NextUI的DatePicker组件。

内容的提问来源于stack exchange，提问作者Tárek Holanda