FlutterUI基础时间选择器

引入flutter_datetime_picker插件

pubspec.yaml文件中引入&＃xff1a;

dependencies:flutter_datetime_picker: 1.2.6

作用及使用

选择时间组件

1. 参考网址&＃xff1a;flutter_datetime_picker

2. 使用方式&＃xff1a;

选择日期

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

选择时间

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

效果如图&＃xff1a;

选择日期时间

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

效果如图&＃xff1a;

可自定义内容

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

效果如图&＃xff1a;

转自&＃xff1a;https://blog.csdn.net/isusjjyy/article/details/102800270