Leaf UI
  • 简体中文

      • DateTimePicker 日期时间选择器

      选择一个具体的日期与时间。

      日期与时间

      交互预览日期与时间
      basic.tsx
      import { DateTimePicker } from '@sudden3/leaf-ui';
export function DateTimePickerBasic() {
  return (
    <div className="leaf-demo-stack">
      <DateTimePicker aria-label="预约时间" defaultValue={new Date(2026, 9, 3, 14, 30)} />
      <DateTimePicker aria-label="12小时预约时间" use12Hours minuteStep={15} secondStep={10} />
      <DateTimePicker
        aria-label="限定时间"
        minDate={new Date(2026, 9, 1)}
        maxDate={new Date(2026, 9, 31, 23, 59, 59)}
        placeholder="选择十月的时间"
      />
    </div>
  );
}

      DateTimePicker API

      属性类型默认值说明
      value / defaultValueDate | nullnull受控值 / 初始值
      onChange(value: Date | null, dateString: string) => void—确认返回 Date 与本地日期时间字符串；清除返回 null
      minDate / maxDateDate—可选边界，精确到时间
      showSecondsbooleantrue显示秒选项；关闭时提交秒为 0
      use12Hoursbooleanfalse使用 12 小时制展示及上午、下午选项
      minuteStep / secondStepnumber1分钟 / 秒间隔，1–60 的整数
      showTodaybooleantrue展示今天快捷按钮
      todayTextReactNode语言默认值自定义今天按钮文字
      renderExtraFooterReactNode—额外底部内容，可放快捷操作
      allowClearbooleantrue展示清除按钮
      size'sm' | 'md' | 'lg''md'控件尺寸
      status'error' | 'warning'—校验状态
      disabled / requiredbooleanfalse禁用 / 必填，可继承 FormField
      placeholder / name / formstring—提示文字 / 字段名 / 表单 ID
      onOpenChange(open: boolean) => void—面板展开或收起
      refRef<HTMLInputElement>—输入框引用

      类型

      定义组件属性或组装变量时可导入相关类型。

      import type { DateTimePickerProps } from '@sudden3/leaf-ui';

      使用说明

      点击面板右上角的时间，在日历与时间面板间切换。“今天”调整草稿日期；时间面板中的“当前时间”设置当前日期时间。可通过 showToday、todayText、renderExtraFooter 定制快捷操作。

      可以输入 YYYY-MM-DD HH:mm:ss，关闭秒时使用 YYYY-MM-DD HH:mm。时间支持 24 小时制、AM/PM 和上午/下午。按 Enter 或点击确定提交草稿；Escape 或点击外部放弃调整。无效或越界输入不会提交。

      日期使用本地时区；12 小时制只影响展示，Date 与 FormData 保持 24 小时格式。原生 input 属性与 aria-* 透传至输入框，className / style 作用于外层。非受控组件支持表单 reset；受控时自行重置 value。