1、在dart库中搜索Flutter_cupertino_date_picker
按文档安装
2、选择需要的日历选择器,按demo修改
地址
3、分别为底部年月日选择器、底部年月日时分选择器
代码示例:
import 'package:Flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:Flutter_cupertino_date_picker/Flutter_cupertino_date_picker.dart';
class Home4 extends StatefulWidget {
Home4({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home4> {
DateTime Now=DateTime.Now();
@override
void initState() {
super.initState();
}
//底部年月日选择器
show()
{
DatePicker.showDatePicker(
context,
pickerTheme: DateTimePickerTheme(
showTitle: true,
confirm: Text('确定', style: TextStyle(color: Colors.red)),
cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
),
minDateTime: DateTime.parse('2010-05-12'), //必须按此格式来
maxDateTime: DateTime.parse("2030-12-22"),
initialDateTime:DateTime.Now(),
dateFormat: "yyyy-MMMMM-dd",
locale: DateTimePickerLocale.zh_cn,
onClose: () => print("----- onClose -----"),
onCancel: () => print('onCancel'),
onChange: (dateTime, List<int> index) {
setState(() {
this.Now=dateTime;
});
},
onConfirm: (dateTime, List<int> index) {
setState(() {
this.Now = dateTime;
});
},
);
}
//底部年月日时分选择器
show2()
{
DatePicker.showDatePicker(
context,
pickerTheme: DateTimePickerTheme(
showTitle: true,
confirm: Text('确定', style: TextStyle(color: Colors.red)),
cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
),
minDateTime: DateTime.parse('2010-05-12'),
maxDateTime: DateTime.parse("2030-12-22"),
initialDateTime:DateTime.Now(),
dateFormat: "'yy年M月d日 EEE,H时:m分'",
pickerMode: DateTimePickerMode.datetime,
locale: DateTimePickerLocale.zh_cn,
onClose: () => print("----- onClose -----"),
onCancel: () => print('onCancel'),
onChange: (dateTime, List<int> index) {
setState(() {
this.Now=dateTime;
});
},
onConfirm: (dateTime, List<int> index) {
setState(() {
this.Now = dateTime;
});
},
);
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('${formatDate(Now, [yyyy, '年', mm, '月', dd])}'),
Icon(Icons.add)
],
),
onTap: (){
this.show2();
},
)
]),
);
}
}
// 因为表单组件需要改变状态,所以要使用有状态组件
/*
Flutter pub get
*/
原文地址:https://blog.csdn.net/weixin_43294560/article/details/105595263
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。