Flutter（二十）：时间

1 时间戳和日期相互转换

利用 date_format 库进行日期格式化。

@override
void initState() {
  var now = DateTime.now();
  print(now); // 2019-06-08 12:08:10.140421

  print(now.millisecondsSinceEpoch); //1559967090998 日期转化成时间戳

  print(DateTime.fromMillisecondsSinceEpoch(1559967090998)); //2019-06-08 12:11:30.998 时间戳转化成日期

  // 2019-06-08   2019/06/08   2019年06月08

  print(formatDate(DateTime.now(), [yyyy, '年', mm, '月', dd])); //2019年06月08，使用 date_format 库格式化
}

2 调用 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 模拟器，注意把模拟器语言调整为中文！！！

效果

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,
            ),
          ],
        ),
      ),
    );
  }
}

效果