Flutter 组件之官方日期组件时间戳转换、第三方组件应用

时间戳转换

获取日期

var now = new DateTime();
var now = DateTime.now();//当前日期

转换成时间戳,单位毫秒。 13位时间戳

now.millisecondsSinceEpoch;

时间戳转化成日期

DateTime.fromMillisecondsSinceEpoch(1585140111111)

2020-03-25 20:41:51 转换成年月日格式
在pubspec.yaml 配置文件内配置第三方依赖网站

 dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  date_format: ^1.0.8

如果不自动下载, 手动在项目目录下执行命令

flutter packages get

如果看到finished 没有报错那就成功了。
可以直接按照文档的使用方式使用插件

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';//引入插件
var now = new DateTime();
print(formatDate(now, [yyyy, '年', mm, '月', dd,'日']));

showDatePicker

默认是英文

 DateTime _nowTime = DateTime.now();
 //第一种方式 then
  _ShowDatePinker(){
    showDatePicker(//future组件方法  类似于Promise
        context: context,//上下文
        initialDate: _nowTime,//当前日期
        firstDate: DateTime(1980), //起始时间
        lastDate: DateTime(2100)//结束时间
    ).then((res)=>{//异步回调
      print(res)//输出时间 2020-03-18 00:00:00.000
    });
  }
//第二种方式 aysnc
_ShowDatePinker() async{
  var result =  await showDatePicker(
      context: context,
      initialDate: _nowTime,
      firstDate: DateTime(1980),
      lastDate: DateTime(2100)
  );
  print(result);
}


Container(//页面组件
  child: InkWell(//水波纹可以点击的组件,类似于Button
     child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
        		 Text("${formatDate(this._nowTime, [yyyy, '年', mm, '月', dd,'日'])}"),
                  Icon(Icons.arrow_drop_down)
       ],
     ),
     onTap: _ShowDatePinker,//点击弹出时间插件
   ),
 ),

日期时间组件数据选中回显

 DateTime _nowTime = DateTime.now();//初始化日期
  var cTime = TimeOfDay(hour: 12, minute: 00);//初始化时间
  _ShowDatePinker() async{
    var result =  await showDatePicker(
        context: context,
        initialDate: _nowTime,
        firstDate: DateTime(1980),
        lastDate: DateTime(2100)
    );
    print(result);
    setState(() {//设置
      this._nowTime=result;
    });
  }

  _ShowTimePinker() async{
    var result = await showTimePicker(
        context: context,
        initialTime: cTime
    );
    setState(() {
      this.cTime=result;
    });
  }
//数据回显
InkWell(//水波纹可以点击的组件,类似于Button
 child: Row(
   mainAxisAlignment: MainAxisAlignment.center,
   children: <Widget>[
     Text("${formatDate(this._nowTime, [yyyy, '年', mm, '月', dd,'日'])}"),//第三方格式化样式
     Icon(Icons.arrow_drop_down)
   ],
 ),
 onTap: _ShowDatePinker,
),InkWell(//水波纹可以点击的组件,类似于Button
 child: Row(
   mainAxisAlignment: MainAxisAlignment.center,
   children: <Widget>[
     Text("${this.cTime.format(context)}"),//format(context)默认格式化样式
     Icon(Icons.arrow_drop_down)
   ],
 ),
 onTap: _ShowTimePinker,
),

flutter showDatePicker showTimePicker显示中文日期

1、配置flutter_localizations依赖
找到pubspec.yaml配置flutter_localizations

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

2、导入国际化的包 flutter_localizations
import 'package:flutter_localizations/flutter_localizations.dart';
3、设置国际化

void main() {
  runApp(
    new MaterialApp(
      title: 'app',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new MyLoginWidget(),
      localizationsDelegates: [
        //此处
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        //此处
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    ),
  );
}

4、要显示中文的控件设置：

_showDatePicker() async{
    var date =await showDatePicker(
      context: context,
      initialDate: _datetime,
      firstDate:DateTime(1900),
      lastDate:DateTime(2050),
      locale: Locale('zh'),    
    );
    if(date==null) return;
    print(date);
    setState(() {
       _datetime=date;
    });
  }

第三方picker组件

flutter_cupertino_date_picker: ^1.0.2

//先导入组件库
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

//定义时间变量
 DateTime oTime = DateTime.now();


//定义组件
  _ShowDateOtherPinker() {
    DatePicker.showDatePicker(
        context,//上下文
        pickerTheme: DateTimePickerTheme(//定义主题
          showTitle:true ,//是否显示标题
          confirm: Text("确认",style: TextStyle(color: Colors.orange),),//确认按钮
          cancel: Text("取消",style: TextStyle(color: Colors.red),)//取消按钮
        ),
        minDateTime: DateTime.parse("1900-00-00"),//最小时间
        maxDateTime: DateTime.parse("2100-00-00"),//最大时间
        initialDateTime: oTime,//初始化时间
        dateFormat: "yyyy-MM-dd",//格式化时间样式
        locale: DateTimePickerLocale.zh_cn,//选择语言
        onCancel: (){//取消按钮回调
         print("quxiao");
        },
//        onChange: (dateTime,List<int> index){
//          setState(() {
//            this.oTime=dateTime;
//          });
//        },
      onConfirm: (dateTime,List<int> index){//确认按钮回调
          setState(() {//设置时间
            this.oTime=dateTime;
          });
      }
    );
  }


InkWell(//水波纹可以点击的组件,类似于Button
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text("${oTime}"),
      Icon(Icons.arrow_drop_down)
    ],
  ),
  onTap: _ShowDateOtherPinker,
),