pubspec.yaml

flutter_cupertino_date_picker: ^1.0.

DatePicker.dart

import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
class DatePickerPubDemo extends StatefulWidget {
DatePickerPubDemo({Key key}) : super(key: key);
_DatePickerPubDemoState createState() => _DatePickerPubDemoState();
} class _DatePickerPubDemoState extends State<DatePickerPubDemo> {
DateTime _dateTime=DateTime.now();
_showDatePicker(){
DatePicker.showDatePicker(
context,
pickerTheme: DateTimePickerTheme(
showTitle: true,
confirm: Text('确定',style:TextStyle(color:Colors.red)),
cancel: Text('取消',style: TextStyle(color: Colors.cyan)),
),
minDateTime: DateTime.parse("1980-05-21"),
maxDateTime: DateTime.parse("2019-05-21"),
initialDateTime: _dateTime,
// dateFormat: "yyyy-MMMM-dd", //只包含年、月、日
dateFormat: 'yyyy年M月d日 EEE,H时:m分',
pickerMode: DateTimePickerMode.datetime,
locale: DateTimePickerLocale.zh_cn,
onCancel: (){
debugPrint("onCancel");
},
onConfirm: (dateTime,List<int> index){
setState(() {
_dateTime=dateTime;
});
}
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('日期选中'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
child: Row(
children: <Widget>[
// Text("${formatDate(_dateTime,[yyyy,'年',mm,'月',dd])}"), //只获取年月日
Text("${formatDate(_dateTime,[yyyy,'年',mm,'月',dd,' ',HH,':',nn])}"),
Icon(Icons.arrow_drop_down)
],
),
onTap:_showDatePicker,
)
],
)
],
),
);
}
}

27flutter日期 时间组件flutter_cupertino_date_picker的使用的更多相关文章

  1. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  2. 如何在Rails6内通过Webpacker使用JavaScript; flatpicker日期时间组件选择器

    如何在Rails6内通过Webpacker使用JavaScript; Rails6默认不再使用asset pipeline,改用Webpacker. 文件结构变化: 配置文件: webpacker.y ...

  3. yii2超好用的日期组件和时间组件

    作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  4. 【Android 应用开发】Android - 时间 日期相关组件

    源码下载地址 : -- CSDN :  http://download.csdn.net/detail/han1202012/6856737 -- GitHub : https://github.co ...

  5. Android - 时间 日期相关组件

    源码下载地址 : -- CSDN :  http://download.csdn.net/detail/han1202012/6856737 -- GitHub : https://github.co ...

  6. 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件

    jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...

  7. POCO库——Foundation组件之日期时间DateTime

    日期时间DateTime:内部提供多个设计计时器.日期.时区.时间戳等: Clock.h :Clock时钟计时类,_clock:Int64类型时钟值,CLOCKVAL_MIN.CLOCKVAL_MAX ...

  8. react-native DatePicker日期选择组件的实现

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

  9. javascript学习之时间组件

    写了一个时间组件,哪里需要哪里调(菜鸟级别,大牛路过就Ok了): 先有一个HTML文件: <!doctype> <html> <head> <title> ...

随机推荐

  1. LearnOpenGL学习笔记(二)纹理

    开始学习OpenGL,参考的是著名的LearnOpenGL这个网站,在这里做一些总结性的记录,只是方便自己日后查找或者记录自己的一些拓展思考,关于OpenGL的具体内容请移步: https://lea ...

  2. Robot Framework--完整的接口测试用例

    *** Settings *** Library Collections Library json Library requests Library RequestsLibrary Library H ...

  3. 如何在vscode中用standard style 风格去验证 vue文件

    1 JavaScript Standard Style简介 本工具通过以下三种方式为你(及你的团队)节省大量时间: 无须配置. 史上最便捷的统一代码风格的方式,轻松拥有. 自动代码格式化. 只需运行 ...

  4. postgresql学习笔记--基础篇

    1. 客户端程序和服务器端程序 1.1 客户端程序 Command Example Describe clusterdb clusterdb -h pghost1 -p 1921 -d mydb Cl ...

  5. 进程 multiprocessing Process join Lock Queue

    多道技术 1.空间上的复用 多个程序公用一套计算机硬件 2.时间上的复用 cpu 切换程序+保存程序状态 1.当一个程序遇到IO操作,操作系统会剥夺该程序的cpu执行权限(提高了cpu的利用率,并且不 ...

  6. jquery统计输入文字的个数并对其进行判断

    <textarea placeholder="该产品满足你的期待吗?说说你的使用心得,分享给 同样看中的他们吧"></textarea> <span ...

  7. 008_软件安装之_MATLAB2017B

    链接:https://pan.baidu.com/s/1haZPRu0-ks8kWBFDHuhNJw提取码:vo9e复制这段内容后打开百度网盘手机App,操作更方便哦

  8. [luogu] 斐波那契数列

    https://www.luogu.org/problemnew/show/P1962 矩阵快速幂加速 #include <bits/stdc++.h> using namespace s ...

  9. 点分 TREE

    /* 1468: Tree Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 774  Solved: 412[Submit][Status][Discus ...

  10. 「CF150E」Freezing with Style「点分治」「单调队列」

    题意 给定一颗带边权的树,求一条边数在\(L\).\(R\)之间的路径,并使得路径上边权的中位数最大.输出一条可行路径的两个端点.这里若有偶数个数,中位数为中间靠右的那个. \(n, L, R\leq ...