Flutter DatePickers & TimePickers时间选择器

最新推荐文章于 2025-03-30 20:00:00 发布

马志武

最新推荐文章于 2025-03-30 20:00:00 发布

阅读量4k

点赞数 2

本文链接：https://blog.youkuaiyun.com/ruoshui_t/article/details/95732141

版权

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开日期和时间选择器分别需要使用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);
    });
  }
}

效果图