Flutter 日期时间DatePicker控件及国际化

最近在学习Flutter,今天正好看到一篇文章收藏下来做个笔记,也分享给大家。

注意:无特殊说明,Flutter版本及Dart版本如下:

  • Flutter版本: 1.12.13+hotfix.5
  • Dart版本: 2.7.0

DatePicker

Flutter并没有DatePicker这个控件,需要使用showDatePicker方法弹出日期选择控件,基本用法如下:

RaisedButton(
 onPressed: () async {
  var result = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2021));
  print('$result');
 },
)
  • initialDate初始化时间,通常情况下设置为当前时间。
  • firstDate表示开始时间,设置后,选择器不能选择小于此值的时间。
  • lastDate表示结束时间,设置后,选择器不能选择大于此值的时间。
  • showDatePicker方法是Future方法,点击日期选择控件的“确定按钮后,返回选择的日期。

效果如下:

selectableDayPredicate参数控制可选日期,返回true表示日期可选,用法如下:

showDatePicker(
 selectableDayPredicate: (DateTime day) {
  return day.difference(DateTime.now()).inDays < 2;
 },
 ...
)

表示后天之前的时间可选,效果如下:

19日及以后的日期变为灰色,不可选状态。

builder参数用于设置设置子控件,比如设置深色主题用法如下:

showDatePicker(
 builder: (context, child) {
  return Theme(
   data: ThemeData.dark(),
   child: child,
  );
 },
  ...
)

效果如下:

中文支持

增加国际化处理,在pubspec.yaml添加支持:

dependencies:
 flutter:
  sdk: flutter
 flutter_localizations:
  sdk: flutter  

在顶级控件MaterialApp添加国际化支持:

MaterialApp(
 localizationsDelegates: [
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: [
  const Locale('zh', 'CH'),
  const Locale('en', 'US'),
 ],
 locale: Locale('zh'),
 ...
)

设置showDatePicker的local参数如下:

showDatePicker(
 locale: Locale('zh'),
 ...
)

效果如下:

TimePicker

TimePicker和DatePicker一样,需要使用showTimePicker方法,用法如下:

RaisedButton(
 onPressed: () async {
  showTimePicker(
    context: context, initialTime: TimeOfDay.now());
 },
)

效果如下:

builder参数用于控制子控件,可以向DatePicker一样设置深色主题,还可以设置其显示24小时,用法如下:

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (context, child) {
   return MediaQuery(
    data: MediaQuery.of(context)
      .copyWith(alwaysUse24HourFormat: true),
    child: child,
   );
  });

效果如下:

中文支持

添加国际化支持,步骤同DatePicker中文支持,但showTimePicker并没有local参数,使用builder参数设置,如下:

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (context, child) {
   return Localizations(
     locale: const Locale('zh'),
     child: child,
     delegates: <LocalizationsDelegate>[
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
     ]
   );
  });

效果如下:

CupertinoDatePicker

ios风格的日期选择器,用法如下:

 var _dateTime = DateTime.now();
CupertinoDatePicker(
 initialDateTime: _dateTime,
 onDateTimeChanged: (date) {
  setState(() {
   _dateTime = date;
  });
 },
)

效果如下:

mode参数设置日期的格式:

  • time:只显示时间,效果:4 | 14 | PM
  • date:只显示日期,效果:July | 13 | 2012
  • dateAndTime:时间和日期都显示,效果: Fri Jul 13 | 4 | 14 | PM

设置最大日期和最小日期:

CupertinoDatePicker(
 minimumDate: DateTime.now().add(Duration(days: -1)),
 maximumDate: DateTime.now().add(Duration(days: 1)),
 ...
)

效果如下:

使用24小时制:

CupertinoDatePicker(
 use24hFormat: true,
  ...
)

CupertinoTimerPicker

CupertinoTimerPicker 是ios风格的时间选择器,基本用法如下:

CupertinoTimerPicker(
 onTimerDurationChanged: (Duration duration){
 },
)

效果如下:

设置只显示小时和分钟:

CupertinoTimerPicker(
 mode: CupertinoTimerPickerMode.hm,
 ...
)

默认情况下,CupertinoTimerPicker显示0:0:0,设置显示当前时间:

var now = DateTime.now();
return Container(
 height: 200,
 child: CupertinoTimerPicker(
  initialTimerDuration: Duration(hours: now.hour,minutes: now.minute,seconds: now.second),
  onTimerDurationChanged: (Duration duration) {},
 ),
);

到此这篇关于Flutter 日期时间DatePicker控件及国际化的文章就介绍到这了,更多相关Flutter 日期时间及国际化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • flutter日期选择器 flutter时间选择器

    本文实例为大家分享了flutter日期时间选择器的具体代码,供大家参考,具体内容如下 1 日期选择器 //设置默认显示的日期为当前 DateTime initialDate = DateTime.now(); void showDefaultYearPicker(BuildContext context) async { final DateTime dateTime = await showDatePicker( context: context, //定义控件打开时默认选择日期 initia

  • Flutter 日期时间DatePicker控件及国际化

    最近在学习Flutter,今天正好看到一篇文章收藏下来做个笔记,也分享给大家. 注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DatePicker Flutter并没有DatePicker这个控件,需要使用showDatePicker方法弹出日期选择控件,基本用法如下: RaisedButton( onPressed: () async { var result = await showDatePic

  • 日期 时间js控件

    复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s

  • JS日期和时间选择控件升级版(自写)

    鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

  • Android中日期与时间设置控件用法实例

    本文实例讲述了Android中日期与时间设置控件用法.分享给大家供大家参考.具体如下: 1.日期设置控件:DatePickerDialog 2.时间设置控件:TimePickerDialog 实例代码: 页面添加两个Button,单击分别显示日期设置控件和时间设置控件,还是有TextView控件,用于显示设置后的系统时间 main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

  • Android 自定义日期段选择控件功能(开始时间-结束时间)

    开发中碰到个需求,需要在一个空间中选择完成开始和结束时间.实现的过程走的是程序员开发的老路子,找到轮子后自己改吧改吧就成了. 当时做的时候有几个需求:1.当天为最大的结束日期,2.最大选择范围1年,3.开始时间和结束时间可以为同一天.如有其他需求实现,可以参考代码改进一下.先上效果图: 视频点击后的虚影是屏幕录制的原因.实现步骤:(如有缺失什么资源,请告知.开始时间和结束时间显示自己布局内添加就可以) 1.自定义控件属性 <declare-styleable name="MyCalenda

  • jQuery的时间datetime控件在AngularJs中的使用实例(分享)

    百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder="开始日期" style="width:156px;" class="form-control date-picker" data-date-format="yyyy-mm-dd" type="text">

  • BootStrap的Datepicker控件使用心得分享

    2013年Bootstrap火了,2014年Bootstrap将继续受到更多人的喜欢,它不仅拥有一套完整漂亮的UI,而且爱好者们为其开发扩展了很多有用的插件和主题!让其拥有无限可能! 公司喜欢使用各种开源免费的框架,bootstrap就非常好用,而且框架布局很漂亮,用起来也很简单.今天遇到要使用它的datepicker这个控件. 问题是:两个时间点,分为开始时间和结束时间,结束时间必须在开始时间之后.于是一顿研究,从上午研究到3点才解决问题. 总结了一下问题所在.主要原因是项目里用的jquery

  • BootStrap中Datepicker控件带中文的js文件

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的.本文给大家介绍bootstrap datepicker带中文的js文件. //用之前引用bootstrap的jsif ($(".datepicker").length > 0) { $(".datepicker").datepicker({ language: "zh-CN", autoclose: true,//选中之后自动隐藏日期选择框 cle

  • layui-laydate时间日历控件使用方法详解

    本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下 layui下载地址:http://www.layui.com/ 此控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layDate快速使用</title&

  • WheelPicker自定义时间选择器控件

    本文实例为大家分享了WheelPicker自定义时间选择器控件的具体代码,供大家参考,具体内容如下 先上图: 使用android自带的DatePicker控件虽然也能实现功能,但样式不能改变.想要实现一些 自定义的样式,就要用到WheelPicker了. 要使用WheelPicker,需要先导入WheelPicker的引用: 1. 在project的build.gradle添加如下代码 allprojects { repositories { jcenter() maven { url "htt

随机推荐