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,
),