flutter DateTime日期&时间选择器
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async'; class DateTimeDemo extends StatefulWidget {
@override
_DateTimeDemoState createState() => _DateTimeDemoState();
} class _DateTimeDemoState extends State<DateTimeDemo> {
DateTime selectedDate = DateTime.now();
TimeOfDay selectedTime = TimeOfDay(hour: 9, minute: 30); Future<void> _selectDate() async {
final DateTime date = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(1900),
lastDate: DateTime(2100),
); if (date == null) return; setState(() {
selectedDate = date;
});
} Future<void> _selectTime() async {
final TimeOfDay time = await showTimePicker(
context: context,
initialTime: selectedTime,
); if (time == null) return; setState(() {
selectedTime = time;
});
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DateTimeDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: _selectDate,
child: Row(
children: <Widget>[
Text(DateFormat.yMMMMd().format(selectedDate)),
Icon(Icons.arrow_drop_down),
],
),
),
InkWell(
onTap: _selectTime,
child: Row(
children: <Widget>[
Text(selectedTime.format(context)),
Icon(Icons.arrow_drop_down),
],
),
),
],
),
],
),
)
);
}
}
pubspec.yaml中添加 intl_translation: ^0.17.2
文档:https://api.flutter.dev/flutter/material/showDatePicker.html
效果:

flutter DateTime日期&时间选择器的更多相关文章
- 24款最好的jQuery日期时间选择器插件
如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...
- Bootstrap-datepicker日期时间选择器的简单使用
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- 解决elementui日期时间选择器提交时与后台date类型不匹配问题
问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...
- elementUI 日期时间选择器 只能选择当前及之后的时间
日期时间选择器 只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- 日期时间选择器插件flatpickr
前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...
随机推荐
- 个性化排序算法实践(五)——DCN算法
wide&deep在个性化排序算法中是影响力比较大的工作了.wide部分是手动特征交叉(负责memorization),deep部分利用mlp来实现高阶特征交叉(负责generalizatio ...
- ted演讲小总结(持续更新_12月15日)
目录 2019年12月1日 星期日 2019年12月2日 星期一 2019年12月3日 星期二 2019年12月8日 星期日 2019年12月15日 星期日(这个演讲相对来说不好理解,因为这类逻辑暂时 ...
- 《代码敲不队》第九次团队作业:Beta冲刺第3天
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 (1)项目文档的完善与整理:(2)团队项目总结陈述PPT编制:(3)符合 ...
- HDFS的NameNode堆内存估算
NameNode堆内存估算 在HDFS中,数据和元数据是分开存储的,数据文件被分割成若干个数据块,每一个数据块默认备份3份,然后分布式的存储在所有的DataNode上,元数据会常驻在NameNode的 ...
- “只有DBA才能导入由其他DBA导出的文件”各种解决办法
“只有DBA才能导入由其他DBA导出的文件”各种解决办法 当oracle导入的时候出现“只有 DBA 才能导入由其他 DBA 导出的文件”的时候通常有以下几种解决办法! 1:常见的是直接grant ...
- 织梦dedecms会员中心分类管理无法修改、删除分类名
member/mtypes.PHP 文件中添加 另外,member/myfriend_group.php文件中也存在同样的问题,也要添加,不添加的话好友分组中也是同样问题
- Coins in a Line
Description There are n coins in a line. Two players take turns to take one or two coins from right ...
- Codeforces Round #508 (Div. 2)【A,B,C,D】【实验室日常周赛训练】
#include<bits/stdc++.h> using namespace std; #define inf 0x3f3f3f3f3f3f #define int long long ...
- bzoj 1072: [SCOI2007]排列perm 状压dp
code: #include <bits/stdc++.h> #define N 1005 using namespace std; void setIO(string s) { stri ...
- SaltStack 在 Windows 上的操作基础
SaltStack 在 windows上的操作基础 1.删除文件: salt '172.16.3.11' file.remove 'D:\downup\111.msu' 2.删除文件夹 salt '1 ...