Flutter学习之日期选择

本文主要介绍下flutter中日期选择的使用showDatePicker

showDatePicker的基数使用

   ElevatedButton(
   child: Text('弹出日期组件'),
   onPressed: () async {
   await showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2020),
   lastDate: DateTime(2024),
 );
}
),

包含以下元素：

1. 标题
2. 选中的日期
3. 切换到输入模式
4. 年份选择菜单
5. 月份分页
6. 当前时间
7. 选中日期

我们也可以切入为输入框，自己输入

• initialDate：初始化时间，通常情况下设置为当前时间。
• firstDate：表示开始时间，不能选择此时间前面的时间。
• lastDate：表示结束时间，不能选择此时间之后的时间。

input模式

var result = await showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2020),
   lastDate: DateTime(2024),
  initialEntryMode: DatePickerEntryMode.input,

 );
print(result);

• 直接显示 输入模式，默认是日历模式。

设置日历日期选择器的初始显示，包含 day 和 year：

var result = await showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2020),
   lastDate: DateTime(2024),
  initialDatePickerMode: DatePickerMode.year,

 );

• 设置顶部标题、取消按钮、确定按钮 文案：

var result = await showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2020),
   lastDate: DateTime(2024),
  initialDatePickerMode: DatePickerMode.day,
  helpText: '选则您想要的日期',
  cancelText: '取消',
  confirmText: '确定',
 );

• 修改输入模式下

var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  errorFormatText: '错误的日期格式',
  errorInvalidText: '日期格式非法',
  fieldHintText: '月/日/年',
  fieldLabelText: '填写日期',
);

• 设置可选日期范围

var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2024),
  initialDatePickerMode: DatePickerMode.day,
  selectableDayPredicate: (date) {
    return date.difference(DateTime.now()).inMilliseconds < 0;
  },
);

不超过今天

• 设置主题

设置深色主题使 builder ，其用于包装对话框窗口小部件以添加继承的窗口小部件，例如Theme，设置深色主题如下

var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2024),
  initialDatePickerMode: DatePickerMode.day,
    builder: (context,child){
      return Theme(
        data: ThemeData.dark(),
        child: child!,
      );
    }
);