如何让NextUI DateTimePicker显示dd/mm/yyyy格式与12小时制时间

要实现dd/mm/yyyy hh:min am的显示格式，不能仅依赖en-GB locale（该locale默认时间为24小时制），需要手动自定义日期和时间格式：

方法一：直接指定格式属性 #

利用DatePicker的dateFormat和timeFormat属性分别设置日期、时间格式，或用format属性统一配置：

import { DatePicker, NextUIProvider } from "@nextui-org/react";

<NextUIProvider>
  <DatePicker
    hideTimeZone
    showMonthAndYearPickers
    // 分别设置日期与时间格式
    dateFormat="dd/MM/yyyy"
    timeFormat="hh:mm a"
    // 也可使用统一的format属性
    // format="dd/MM/yyyy hh:mm a"
  />
</NextUIProvider>

方法二：自定义格式化函数（适配复杂场景） #

如果需要更灵活的格式解析逻辑，可结合date-fns工具，通过formatter属性自定义处理：

import { DatePicker, NextUIProvider } from "@nextui-org/react";
import { format } from "date-fns";

<NextUIProvider>
  <DatePicker
    hideTimeZone
    showMonthAndYearPickers
    formatter={{
      // 自定义显示格式
      format: (date) => format(date, "dd/MM/yyyy hh:mm a"),
      // 自定义输入解析逻辑（适配dd/mm/yyyy hh:mm am格式）
      parse: (value) => {
        const [datePart, timePart, period] = value.split(" ");
        const [day, month, year] = datePart.split("/").map(Number);
        let [hour, minute] = timePart.split(":").map(Number);
        
        if (period.toLowerCase() === "pm" && hour < 12) hour += 12;
        if (period.toLowerCase() === "am" && hour === 12) hour = 0;
        
        return new Date(year, month - 1, day, hour, minute);
      }
    }}
  />
</NextUIProvider>

关键说明 #

en-GB locale的时间规则默认是24小时制，因此仅修改locale无法同时满足dd/mm/yyyy日期格式和12小时制带am/pm的需求。方法一适合大多数简单场景，方法二可应对需要自定义输入解析的复杂场景。

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