Flutter中的日期、格式化日期、日期选择器组件

Flutter中的日期和时间戳

1//獲取當前日期
2DateTime _nowDate = DateTime.now();
3
4print(_nowDate);//2019-10-29 10:57:20.384872
5
6print(_nowDate.millisecondsSinceEpoch);//時間戳，1572317840384
7
8print(DateTime.fromMicrosecondsSinceEpoch(1572317840384));//時間戳轉換日期，1970-01-19 12:45:17.840384

所谓时间戳，是指自格林威治时间1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起至现在的总秒数。

有些情况下，后台可能会将所有的时间都转换成时间戳返回给我们前端，这是我们就需要将时间戳转换成时间，并将时间进行格式化。

展示一个时间，我们会有多种形式，比如1970-01-01、1970/01/01、1970年01月01日，等等，那么我们如何把同一个时间根据需要转换成不同的格式呢？接下来我就为大家介绍一个Flutter中的第三方库。

Flutter第三方組件庫

登陸pub.dev搜索date_format組件查看Installing添加依賴

pubspec.yaml

1dependencies:
2    date_format: ^1.0.8

按ctrl+s或flutter packages get後會自動下載依賴包，注意控制台，如無異常就是下載成功

引入包

1import 'package:date_format/date_format.dart';
2
3print(formatDate(DateTime.now(), [yyyy, "-", mm, "-", dd, " ", DD, " ", HH, ":", nn, ":", ss]));

輸出

2019-10-29 Wednesday 14:27:29

调用Flutter自带的日期选择器组件和时间选择器组件

顯示日曆組件和獲取選中數據的方法一

1//_代表私有，重寫私有的日曆組建
2  _showDatePicker(){
3    showDatePicker(
4      context:context,//上下文必須傳入
5      initialDate:_nowDate,//設置初始化日期
6      firstDate:DateTime(1900),//設置起始時間
7      lastDate: DateTime(2100),//設置結束時間
8    ).then((val){//異步方法
9      print(val);
10    });
11  }

方法二

1_showDatePicker() async{
2    var val = await showDatePicker(
3      context:context,//上下文必須傳入
4      initialDate:_nowDate,//設置初始化日期
5      firstDate:DateTime(1900),//設置起始時間
6      lastDate: DateTime(2100),//設置結束時間
7    );
8    setState(() {
9      //將獲得時間傳給變量
10      this._nowDate =val;
11    });
12  }

使用變量替換文本

Container(  margin: EdgeInsets.all(5),  width: 350,  height: 120,  decoration: new BoxDecoration(    color: Colors.black12,    borderRadius:BorderRadius.circular(10.0),//邊框  ),  child: GestureDetector(//手勢事件    child: Text('${formatDate(_nowDate, [yyyy, "-", mm, "-", dd])}'),//替換文本    onTap: (){      _showDatePicker();//調用重寫的組件    },  ),),

時間

1　　//自帶組件  showTimePicker(
2      context: context,
3      initialTime: new TimeOfDay.now(),
4    ).then((val) {
5      print(val);
6    }).catchError((err) {
7      print(err);
8    });            
9
10//獲得當前時間
11  var _nowTime = TimeOfDay.now();
12
13
14_showTimePicker() async{
15    var val = await showTimePicker(
16        context: context,//上下文
17        initialTime: _nowTime//當前時間，設置固定時間TimeOfDay(hour: 12,minute: 10)
18    );
19    setState(() {
20      this._nowTime = val;
21    });
22  }

參考：https://cloud.tencent.com/developer/article/1495839