Flutter 时间选择器

最新推荐文章于 2025-05-23 13:02:00 发布

郭文武

最新推荐文章于 2025-05-23 13:02:00 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter时间选择 flutter datetime

本文链接：https://blog.csdn.net/isusjjyy/article/details/102800270

flutter 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在Flutter中使用flutter_datetime_picker插件进行时间选择。通过在pubspec.yaml文件引入该插件，可以实现日期、时间及日期时间的选择，并展示了各种选择器的效果图。文章还提到，作者欢迎读者加入群聊讨论更多Flutter相关问题。

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

引入flutter_datetime_picker插件

pubspec.yaml文件中引入：

dependencies:
  flutter_datetime_picker: 1.2.6

作用及使用

选择时间组件

参考网址：flutter_datetime_picker

使用方式：

选择日期

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

FlatButton(
  onPressed: () {
    DatePicker.showDatePicker(context,
      // 是否展示顶部操作按钮
      showTitleActions: true,
      // 最小时间
      minTime: DateTime(2018, 3, 5),
      // 最大时间
      maxTime: DateTime(2099, 6, 7),
      // change事件
      onChanged: (date) {
        print('change $date');
      },
      // 确定事件
      onConfirm: (date) {
        print('confirm $date');
      },
      // 当前时间
      currentTime: DateTime.now(),
      // 语言
      locale: LocaleType.zh);
  },
  child: Text(
    '选择日期(Chinese)',
    style: TextStyle(color: Colors.blue),
  )
)

效果如图：

plugins

选择时间

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

FlatButton(
  onPressed: () {
    DatePicker.showTimePicker(context,
        // 是否展示顶部操作按钮
        showTitleActions: true,
        // change事件
        onChanged: (date) {
          print('change $date');
        },
        // 确定事件
        onConfirm: (date) {
          print('confirm $date');
        },
        // 当前时间
        // currentTime: DateTime(2019, 6, 20, 17, 30, 20), // 指定时间
        currentTime: DateTime.now(), // 当前时间
        // 语言
        locale: LocaleType.zh);
  },
  child: Text(
    '仅选择时间(Chinese)',
    style: TextStyle(color: Colors.blue),
  )),

效果如图：

plugins

选择日期时间

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

FlatButton(
  onPressed: () {
    DatePicker.showDateTimePicker(context,
        // 是否展示顶部操作按钮
        showTitleActions: true,
        // change事件
        onChanged: (date) {
          print('change $date');
        },
        // 确定事件
        onConfirm: (date) {
          print('confirm $date');
        },
        // 当前时间
        currentTime: DateTime.now(),
        // 语言
        locale: LocaleType.zh);
  },
  child: Text(
    '选择日期时间(Chinese)',
    style: TextStyle(color: Colors.blue),
)),

效果如图：

plugins

可自定义内容

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

FlatButton(
  onPressed: () {
    DatePicker.showPicker(context,
        // 是否展示顶部操作按钮
        showTitleActions: true,
        // change事件
        onChanged: (date) {
          print('change $date');
        },
        // 确定事件
        onConfirm: (date) {
          print('confirm $date');
        },
        // 自定义内容model
        // pickerModel:CommonPickerModel(),
        // 语言
        locale: LocaleType.zh);
  },
  child: Text(
    '自定义选择框(Chinese)',
    style: TextStyle(color: Colors.blue),
  )),

效果如图：

plugins