如何修改NextUI DatePicker/DateInput的日期显示格式为dd/mm/yyyy？

在NextUI 2.3.6版本中，DatePicker和DateInput组件都支持通过format属性直接指定日期的显示格式，轻松实现dd/mm/yyyy的需求，无需复杂配置。

直接设置format属性 #

这是最直接的方式，组件会自动按照指定格式渲染日期，同时下拉选择面板的日期选择逻辑也会适配该格式：

DateInput 示例

import { DateInput } from "@nextui-org/react";

function CustomFormatDateInput() {
  return (
    <DateInput
      label="选择日期"
      format="dd/mm/yyyy"
      placeholder="dd/mm/yyyy"
    />
  );
}

DatePicker 示例

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

function CustomFormatDatePicker() {
  return (
    <DatePicker
      label="选择日期"
      format="dd/mm/yyyy"
      placeholder="dd/mm/yyyy"
    />
  );
}

自定义日期解析（可选） #

如果需要处理用户手动输入的日期字符串（确保dd/mm/yyyy格式的输入能正确转换为Date对象），可以配合parseDate属性自定义解析逻辑：

import { DateInput } from "@nextui-org/react";

const parseDDMMYYYY = (value) => {
  if (!value) return null;
  const [day, month, year] = value.split('/').map(Number);
  // 注意月份是从0开始的，所以要减1
  return new Date(year, month - 1, day);
};

function CustomParseDateInput() {
  return (
    <DateInput
      label="选择日期"
      format="dd/mm/yyyy"
      placeholder="dd/mm/yyyy"
      parseDate={parseDDMMYYYY}
    />
  );
}

内容的提问来源于stack exchange，提问作者R. Boutte