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日期&时间选择器的更多相关文章

  1. 24款最好的jQuery日期时间选择器插件

    如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...

  2. Bootstrap-datepicker日期时间选择器的简单使用

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  3. 解决elementui日期时间选择器提交时与后台date类型不匹配问题

    问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...

  4. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  5. 微信小程序----日期时间选择器(自定义精确到分秒或时段)

    声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...

  6. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  7. Android日期时间选择器实现以及自定义大小

    本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...

  8. flatpickr功能强大的日期时间选择器插件

    flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

  9. 日期时间选择器插件flatpickr

    前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...

随机推荐

  1. SQL 必知必会笔记--完整介绍sql技巧

    PS:完整介绍数据处理,表结构操作,视图,事务处理,存储过程,约束,索引,游标,触发,数据库安全等sql技巧 目录 数据处理 增:插入数据+复制表 删:删除行数据+删除指定列数据 改:更新数据 查:基 ...

  2. ArcGIS API for JS 4.x 离线部署(https)

    在离线部署查资料的过程中,基本全部都是部署在“Default Web Site”下面,部署在这个下面的默认是 http 方式请求的.并且不能修改. 但是系统中请求的都是 https,这样导致请求不到J ...

  3. machine learning (4)---feature scaling

    feature scaling:缩小或扩大feature的值,使所有的feature处于类似的范围,这样进行gradient descnet时更快趋向最小值.因为不同的feature的范围相差很大时, ...

  4. java常用关键字(static、final、this、super)

    this关键字 this关键字的作用有 1.调用本类的成员变量 public class Soft{ private int a; public Soft(int a){ this.a=a; } } ...

  5. 写一个python小程序

    在windows环境下进行操作 window+R 输入cmd  创建一个文件夹 mkdir pytxt 创建一个py文件 py.py  用notepad或者记事本等工具进行编辑 或 首先声明pytho ...

  6. tensorflow API _ 2 (tf.app.flags.FLAGS)

    tf.app.flags.FLAGS 的使用,主要是在用命令行执行程序时,需要传些参数,代码如下:新建一个名为:app_flags.py 的文件. #coding:utf-8  import tens ...

  7. LightOJ - 1323 - Billiard Balls(模拟)

    链接: https://vjudge.net/problem/LightOJ-1323 题意: You are given a rectangular billiard board, L and W ...

  8. Mysql 查询阻塞和事物情况

    MYSQL 服务器逻辑架构图 连接/线程处理 == > (解析器 –> 查询缓存) ===> 优化器 ===> 存储引擎 服务器级别锁MYSQL 使用的锁类型:表锁(显式:LO ...

  9. Java基础学习【字符串倒序输出+排序】

    字符串逆序输出 import java.util.*; public class Main{ public static void main(String [] args) { //字符串逆序输出 S ...

  10. Linux sudo权限绕过(CVE-2019-14287)

    2019年10月14日,Sudo官方发布了Sudo 1.8.28版本,其中包含sudo root权限绕过漏洞的补丁修复. 此漏洞编号是CVE-2019-14287,当sudo配置为允许用户以任意方式运 ...