Flutter DatePickers & TimePickers时间选择器

最新推荐文章于 2025-11-14 17:42:02 发布

原创最新推荐文章于 2025-11-14 17:42:02 发布 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter DatePickers &amp; TimePick #Flutter 时间选择器 #Flutter DatePickers #Flutter TimePickers

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文介绍如何使用showDatePicker和showTimePicker函数来选择日期和时间。通过具体代码示例展示了如何设定日期范围、日期选择条件及对话框样式。

打开日期和时间选择器分别需要使用showDatePicker()和 showTimePicker()函数。

参数说明

属性	说明
showDatePicker
context	上下文
initialDate	初始日期
firstDate	开始日期
lastDate	结束日期
selectableDayPredicate	控制可选日期。如true则都可选，如false则不可选
initialDatePickerMode	用于最初在年或月+日选择器模式中显示日期选择器。默认DatePickerMode.day
locale	用于设置日期选择器的区域设置
textDirection	设置日期选择器的文本方向
builder	用于包装对话框小部件以添加主题等继承的小部件。
showTimePicker
context	上下文
initialTime	初始时间
builder	用于包装对话框小部件以添加主题等继承的小部件。

代码示例

//打开日期选择器
mDatePicker() async{
  var result = await showDatePicker(
    context:context,
    initialDate:nowDate,
    firstDate:DateTime(1900),
    lastDate:DateTime(2100),
    selectableDayPredicate:(nowDate){
      return nowDate.isBefore(DateTime(2019,7,20));
    },
    builder: (BuildContext context, Widget child) {
      return Theme(
        data: ThemeData.dark(),
        child: child,
      );
    },
  );
  if(result!= null){
    nowDate =  result;
    mTimePicker();
  }
  
}
//打开时间选择器
mTimePicker() async {
  TimeOfDay result = await showTimePicker(
    context:context,
    initialTime:TimeOfDay.fromDateTime(nowDate),
  );
  if(result!= null){
    setState(() {
    //更改显示时间（）
    nowDate = new DateTime(nowDate.year,nowDate.month,nowDate.day, result.hour,result.minute);
    });
  }
}

效果图