Flutter学习之日期选择

携手发明，一同生长！这是我参加「日新计划 8 月更文应战」的第29天，点击检查活动概略

本文首要介绍下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!,
      );
    }
);