1 時間戳和日期相互轉(zhuǎn)換
利用 date_format 庫進(jìn)行日期格式化。
@override
void initState() {
var now = DateTime.now();
print(now); // 2019-06-08 12:08:10.140421
print(now.millisecondsSinceEpoch); //1559967090998 日期轉(zhuǎn)化成時間戳
print(DateTime.fromMillisecondsSinceEpoch(1559967090998)); //2019-06-08 12:11:30.998 時間戳轉(zhuǎn)化成日期
// 2019-06-08 2019/06/08 2019年06月08
print(formatDate(DateTime.now(), [yyyy, '年', mm, '月', dd])); //2019年06月08耙箍，使用 date_format 庫格式化
}
2 調(diào)用 flutter 自帶日期組件和時間組件
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
DateTimePickerLocale _locale = DateTimePickerLocale.zh_cn;
DateTime _dateTime = DateTime.now();
_showDatePicker() async {
// showDatePicker(
// context:context,
// initialDate:_nowDate,
// firstDate:DateTime(1980),
// lastDate:DateTime(2100),
// ).then((result){
// print(result);
// });
var result = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(1980),
lastDate: DateTime(2100),
// locale: Locale('zh'), //非必須
);
print(result); // 2020-07-09 00:00:00.000
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("測試"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
SizedBox(height: 40),
InkWell(
child: Container(
child: Text("${formatDate(_dateTime, [yyyy,'-',mm,'-',dd,' ',HH,':',nn,':',ss])}"),
),
onTap: this._showDatePicker,
),
],
),
),
);
}
}
效果
- 時間組件
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
DateTimePickerLocale _locale = DateTimePickerLocale.zh_cn;
var _nowTime = TimeOfDay(hour: 12, minute: 20);
_showTimePicker() async {
var result = await showTimePicker(context: context, initialTime: _nowTime);
print(result); // TimeOfDay(21:45)
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("測試"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
SizedBox(height: 40),
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("${_nowTime.format(context)}"),
Icon(Icons.arrow_drop_down)
],
),
onTap: _showTimePicker,
)
],
),
),
);
}
}
效果
3 國際化（中文）
參考：http://www.ptbird.cn/flutter-localizations-date-pick-chinese.html
- 1 引入 flutter_localizations
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
- 2 指定 MaterialApp的localizationsDelegates 和 supportedLocales
import 'package:flutter_localizations/flutter_localizations.dart';
new MaterialApp(
localizationsDelegates: [
// ... app-specific localization delegate[s] here
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('zh', 'CH'),
// const Locale('en', 'US'), // 如果引入 iOS 還是英文
],
// ...
)
如果 iOS 模擬器，注意把模擬器語言調(diào)整為中文＜病！！
效果
4 使用第三方 flutter_cupertino_date_picker 日期組件
抽離日期組件
DateTime.dart
/*
* Author: lin.zehong
* Date: 2020-07-03 17:15:04
* Desc: 日期時間組件
*/
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
const String MIN_DATE = '1980-01-01';
const String MAX_DATE = '2100-01-01';
const String FORMAT_DATE = 'yyyy-MMMM-dd';
const String MIN_DATETIME = '1980-01-01 09:00:00';
const String MAX_DATETIME = '2100-00-01 21:00:00';
const String FORMAT_DATETIME = 'yyyy-MM-dd HH時:mm分';
// const String FORMAT_DATETIME = 'yyyy-MM-dd HH時:mm分:ss秒';
// const String _format = 'yyyy年MM月dd日 H時:m分';
// const String _format = 'yy年M月d日 EEE,H時:m分';
class DateTimePage {
DateTimePickerLocale _locale = DateTimePickerLocale.zh_cn;
// DateTime _dateTime = DateTime.now();
@required
BuildContext context;
String format;
Function onConfirm;
Function onClose;
Function onCancel;
DateTime initialDateTime;
DateTimePage(
this.context, {
this.initialDateTime,
this.format,
this.onConfirm,
this.onCancel,
this.onClose,
});
// 日期
void showDatePicker() {
DatePicker.showDatePicker(
context,
onMonthChangeStartWithFirstDate: true,
pickerTheme: DateTimePickerTheme(
showTitle: true,
cancel: Text('取消', style: TextStyle(color: Colors.blue)),
confirm: Text('確定', style: TextStyle(color: Colors.blue)),
),
minDateTime: DateTime.parse(MIN_DATE),
maxDateTime: DateTime.parse(MAX_DATE),
initialDateTime: this.initialDateTime,
// pickerMode: DateTimePickerMode.time, // show TimePicker
locale: _locale,
dateFormat: this.format ?? FORMAT_DATE,
onClose: onClose,
onCancel: onCancel,
onConfirm: (dateTime, List<int> index) {
this.onConfirm(dateTime);
},
);
}
// 日期時間
void showDateTimePicker() {
DatePicker.showDatePicker(
context,
onMonthChangeStartWithFirstDate: true,
pickerTheme: DateTimePickerTheme(
showTitle: true,
cancel: Text('取消', style: TextStyle(color: Colors.blue)),
confirm: Text('確定', style: TextStyle(color: Colors.blue)),
),
minDateTime: DateTime.parse(MIN_DATETIME),
maxDateTime: DateTime.parse(MAX_DATETIME),
initialDateTime: this.initialDateTime,
pickerMode: DateTimePickerMode.time, // show TimePicker
locale: _locale,
dateFormat: this.format ?? FORMAT_DATETIME,
onClose: onClose,
onCancel: onCancel,
onConfirm: (dateTime, List<int> index) {
this.onConfirm(dateTime);
},
);
}
}
Test.dart 使用
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
import 'package:app03/components/DateTime/DateTime.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
DateTimePickerLocale _locale = DateTimePickerLocale.zh_cn;
DateTime _dateTime = DateTime.now();
void _showDatePicker() {
DateTimePage(
context,
onConfirm: this.onConfirm,
// initialDateTime: DateTime.parse('2000-05-15 09:23:10'),
// format: "yyyy-MM-dd HH時:mm分:ss秒",
// onCancel: () => print('onCancel'),
// onClose: () => print('onColse'),
).showDateTimePicker();
}
void onConfirm(dateTime) {
print(dateTime); // 2020-07-03 22:33:56.000
setState(() {
_dateTime = dateTime;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("測試"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
SizedBox(height: 40),
InkWell(
child: Container(
child:
Text("${formatDate(_dateTime, [yyyy, '-', mm, '-', dd])}"),
),
onTap: this._showDatePicker,
),
],
),
),
);
}
}
效果
