TrionesDev Antd Flutter

Appearance

DatePicker 日期选择器 ​

DatePicker 是一个底部弹出的日期时间选择器组件，支持多种日期和时间选择模式。

代码演示 ​

API ​

showAntDatePicker 方法参数 ​

属性说明类型默认值
context构建上下文BuildContext必填
mode日期选择模式AntDatePickerModeAntDatePickerMode.date
title标题WidgetWidget?null
titleText标题文字String?null
showTime是否显示时间，仅在mode为AntDatePickerMode.date时有效boolfalse
timeFormat时间格式，仅在mode为AntDatePickerMode.date且showTime=true，或mode为AntDatePickerMode.time时有效String?null
value默认值DateTime?null
onOk点击确定按钮回调ValueChanged<DateTime?>?null
minDate最小日期DateTime?null
maxDate最大日期DateTime?null

DatePicker.showD 静态方法参数 ​

属性说明类型默认值
context构建上下文BuildContext必填
mode日期选择模式AntDatePickerModeAntDatePickerMode.date
title标题WidgetWidget?null
titleText标题文字String?null
showTime是否显示时间，仅在mode为AntDatePickerMode.date时有效boolfalse
timeFormat时间格式，仅在mode为AntDatePickerMode.date且showTime=true，或mode为AntDatePickerMode.time时有效String?null
value默认值DateTime?null
onOk点击确定按钮回调ValueChanged<DateTime?>?null
minDate最小日期DateTime?null
maxDate最大日期DateTime?null

AntDatePickerMode 枚举值 ​

值说明
date日期模式（默认）
time时间模式

使用示例 ​

基础用法 ​

dart
// 基本日期选择
AntButton(
  text: "基本用法",
  onPressed: () {
    DatePicker.showD(
      context: context,
      onOk: (value) {
        print(value);
      },
    );
  },
)

带时间的日期选择 ​

dart
// 带时间的日期选择
AntButton(
  text: "带时间的日期选择",
  onPressed: () {
    DatePicker.showD(
      context: context,
      showTime: true,
      onOk: (value) {
        print(value);
      },
    );
  },
)

时间模式 ​

dart
// 时间模式
AntButton(
  text: "时间模式",
  onPressed: () {
    DatePicker.showD(
      context: context,
      mode: AntDatePickerMode.time,
      onOk: (value) {
        print(value);
      },
    );
  },
)

自定义时间格式 ​

dart
// 自定义时间格式
AntButton(
  text: "自定义时间格式",
  onPressed: () {
    DatePicker.showD(
      context: context,
      mode: AntDatePickerMode.time,
      timeFormat: "HH:mm",
      onOk: (value) {
        print(value);
      },
    );
  },
)

设置默认值和范围 ​

dart
// 设置默认值和范围
AntButton(
  text: "设置默认值和范围",
  onPressed: () {
    DatePicker.showD(
      context: context,
      value: DateTime(2026, 6, 15),
      minDate: DateTime(2024, 1, 1),
      maxDate: DateTime(2028, 12, 31),
      onOk: (value) {
        print(value);
      },
    );
  },
)

注意事项 ​

  1. showTime 参数仅在 mode 为 AntDatePickerMode.date 时生效
  2. timeFormat 参数仅在 mode 为 AntDatePickerMode.time 或 showTime 为 true 时生效
  3. 使用 minDate 和 maxDate 可以限制可选的日期范围
  4. showD 静态方法和 showAntDatePicker 函数功能相同，可根据使用习惯选择
  5. 日期格式遵循 intl 包的格式规范
  6. 选择完成后会通过 onOk 回调返回所选的 DateTime 对象
  7. 点击遮罩层或取消按钮会关闭选择器而不触发任何回调