Flutter中的日期插件date_format 中文國際化及flutter_cupertino_date_picker

本文轉載自查看原文 2019-12-04 08:21 1355 日期選擇器/ Flutter/ date_format/ flutter_cupertino_date_picker

今天我們來聊聊Flutter中的日期和日期選擇器。

Flutter中的日期和時間戳

//日期時間戳轉換
var _nowTime = DateTime.now();//獲取當前時間
print(_nowTime);
print(_nowDate.millisecondsSinceEpoch); //13位時間戳 1575389234667
print(DateTime.fromMillisecondsSinceEpoch(1575389234667)); //時間戳轉為日期2019-12-03 16:07:14.667

展示一個時間，會有多種形式，比如1970-01-01、1970/01/01、1970年01月01日，等等，那么我們如何把同一個時間根據需要轉換成不同的格式呢？接下來我就為大家介紹一個Flutter中的第三方庫。

Flutter的第三方庫 date_format

地址：https://pub.dev/packages/date_format

添加依賴：date_format: ^1.0.8

引入：

import 'package:date_format/date_format.dart';

簡單來個例子，代碼如下：

print(formatDate(DateTime.now(), [yyyy, "年", mm, "月", dd])); //2019年12月03

在開發項目的時候，我們經常會遇到選擇時間或者選擇日期的場景，接下來我將為大家介紹Flutter中自帶的日期選擇器和時間選擇器。

調用Flutter自帶的日期選擇器組件和時間選擇器組件

調起日期選擇器的方法showDatePicker的返回值是Future，Future是一個異步類型，因此showDatePicker是一個異步方法。而要獲取異步方法里面的數據，有兩種方式。

1、獲取異步方法里面的值的第一種方式：then

_showDatePicker(){
    showDatePicker(
      context: context,
      initialDate: _nowDate, //選中的日期
      firstDate: DateTime(1900), //日期選擇器上可選擇的最早日期
      lastDate: DateTime(2100), //日期選擇器上可選擇的最晚日期
    ).then((result){
      print(result);
    });
 }

2、獲取異步方法里面的值的第二種方式：async+await

 _showDatePicker() async{
    var result = await showDatePicker(
      context: context,
      initialDate: _nowDate, //選中的日期
      firstDate: DateTime(1900), //日期選擇器上可選擇的最早日期
      lastDate: DateTime(2100), //日期選擇器上可選擇的最晚日期
    );
    print(result);
  }

兩種方式都可以實現調用日期選擇器。

Flutter自帶的日期選擇器是showDatePicker，時間選擇器是showTimePicker。這兩個選擇器默認的顯示效果都是英文的，我們是在中國，那么就需要將其顯示成中文版的，這就涉及到Flutter的國際化的問題。

Flutter中的國際化

第一步：配置flutter_localizations依賴

找到pubspec.yaml，配置flutter_localizations：

flutter_localizations:
    sdk: flutter

第二步：導入國際化的包flutter_localizations.dart

main.dart導入

import 'package:flutter_localizations/flutter_localizations.dart';

第三步，設置國際化

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      onGenerateRoute: prefix0.onGenerateRoute,
      initialRoute: "/",
      //配置如下兩個國際化的參數
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: [
        const Locale("zh", "CH"),
        const Locale("en", "US")
      ],
    );
  }
}

如果操作系統是中文的，那么現在就可以顯示中文了，如果操作系統不是中文的，那么還需要下面第四步。

第四步，在需要展示特定語言的組件中進行配置

//調起日期選擇器
_showDatePicker() {
  showDatePicker(
    context: context,
    initialDate: _selectedDate, 
    firstDate: DateTime(1980), 
    lastDate: DateTime(2100),
    locale: Locale("zh")//中文顯示
  ).then((selectedValue) {
    setState(() {
      if (selectedValue != null) {
        this._selectedDate = selectedValue;
      }
    });
  });
}

這樣配置好了之后，效果如下：

完整代碼如下：

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';

class DatePicker extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DatePicker();
}

class _DatePicker extends State<DatePicker> {
  DateTime _nowDate = DateTime.now(); //當前日期
  TimeOfDay _nowTime = TimeOfDay.now(); //當前時間

  //調起日期選擇器
  _showDatePicker(){
    //獲取異步方法里面的值的第一種方式：then
    showDatePicker(
      //如下四個參數為必填參數
      context: context,
      initialDate: _nowDate, //選中的日期
      firstDate: DateTime(1900), //日期選擇器上可選擇的最早日期
      lastDate: DateTime(2100), //日期選擇器上可選擇的最晚日期
    ).then((result){
      print(result);
      //將選中的值傳遞出來
      setState(() {
        this._nowDate = result;
      });
    });
  }
  // _showDatePicker() async{
  //   // 獲取異步方法里面的值的第二種方式：async+await
  //   //await的作用是等待異步方法showDatePicker執行完畢之后獲取返回值
  //   var result = await showDatePicker(
  //     context: context,
  //     initialDate: _nowDate, //選中的日期
  //     firstDate: DateTime(1900), //日期選擇器上可選擇的最早日期
  //     lastDate: DateTime(2100), //日期選擇器上可選擇的最晚日期
  //   );
  //   print(result);
  //   setState(() {
  //     this._nowDate = result;
  //   });
  // }

  //調起時間選擇器
  _showTimePicker() async{
    // 獲取異步方法里面的值的第二種方式：async+await
    //await的作用是等待異步方法showDatePicker執行完畢之后獲取返回值
    var result = await showTimePicker(
      context: context,
      initialTime: _nowTime, //選中的時間
    );
    print(result);
    //將選中的值傳遞出來
    setState(() {
      this._nowTime = result;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    var _date = formatDate(_nowDate, [yyyy, "-", mm, "-", dd]);
    var _time = _nowTime.format(context);  
    return Scaffold(
      appBar: AppBar(title: Text("日期時間選擇器")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                onTap:_showDatePicker,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("${_date}"),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
              ),
              InkWell(
                onTap:_showTimePicker,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("${_time}"),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
              ),
            ],
          )
        ],
      ),

    );
  }
}

調用Flutter的第三方時間選擇器組件

上面介紹了系統給我們提供的日期時間選擇器，但是有時候系統提供的選擇器並不符合我們的要求，這時我們就可以到pub.dev上去尋找符合我們要求的日期選擇器。

這里我們介紹一款Cupertino風格（即iOS風格）的日期選擇器——flutter_cupertino_date_picker。

地址：https://pub.dev/packages/flutter_cupertino_date_picker

添加依賴：flutter_cupertino_date_picker: ^1.0.12

新建dart頁面，引入：

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

這個插件提供了很多種格式，看你需要那種格式就找到那種格式的例子代碼，看怎么使用。

1、首先date_picker_bottom_sheet為例

地址：https://github.com/dylanwuzh/flutter-cupertino-date-picker/blob/master/example/lib/date_picker_bottom_sheet.dart

一些引入date_format包，當前日期等參數我就不再寫了。見上面代碼

調起date_picker_bottom選擇器，為了和上面的代碼區分，我換了一個名字

//調起date_picker_bottom選擇器
  _cupertinoPicker(){
    DatePicker.showDatePicker(
      context,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('確定', style: TextStyle(color: Colors.red)), 
        cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
      ),
      minDateTime: DateTime.parse('2010-05-12'), //起始日期
      maxDateTime: DateTime.parse('2021-11-25'), //終止日期
      initialDateTime: _nowDate, //當前日期
      dateFormat: 'yyyy-MMMM-dd',  //顯示格式
      locale: DateTimePickerLocale.zh_cn, //語言 默認DateTimePickerLocale.en_us
      onClose: () => print("----- onClose -----"),
      onCancel: () => print('onCancel'),
      onChange: (dateTime, List<int> index) { //改變的時候
        setState(() {
          _nowDate = dateTime;
        });
      },
      onConfirm: (dateTime, List<int> index) { //確定的時候
        setState(() {
          _nowDate = dateTime;
        });
      },
    );
  }

效果圖：

完整代碼如下：

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

class CupertinoTimePage extends StatefulWidget {
  CupertinoTimePage({Key key}) : super(key: key);

  @override
  _CupertinoTimePageState createState() => _CupertinoTimePageState();
}

class _CupertinoTimePageState extends State<CupertinoTimePage> {
  DateTime _nowDate = DateTime.now(); //當前日期
  TimeOfDay _nowTime = TimeOfDay.now(); //當前時間

  //調起flutter_cupertino_date_picker選擇器
  _cupertinoPicker(){
    DatePicker.showDatePicker(
      context,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('確定', style: TextStyle(color: Colors.red)), 
        cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
      ),
      minDateTime: DateTime.parse('2010-05-12'), //起始日期
      maxDateTime: DateTime.parse('2021-11-25'), //終止日期
      initialDateTime: _nowDate, //當前日期
      dateFormat: 'yyyy-MMMM-dd',  //顯示格式
      locale: DateTimePickerLocale.zh_cn, //語言 默認DateTimePickerLocale.en_us
      onClose: () => print("----- onClose -----"),
      onCancel: () => print('onCancel'),
      onChange: (dateTime, List<int> index) { //改變的時候
        setState(() {
          _nowDate = dateTime;
        });
      },
      onConfirm: (dateTime, List<int> index) { //確定的時候
        setState(() {
          _nowDate = dateTime;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    var _date = formatDate(_nowDate, [yyyy, "-", mm, "-", dd]);return Scaffold(
      appBar: AppBar(title: Text("第三方IOS時間選擇器演示頁面")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                onTap: _cupertinoPicker,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("${_date}"),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
              ),
            ]
          ),
        ]
      )        
    );
  }
}

2、datetime_picker_bottom_sheet

地址：https://github.com/dylanwuzh/flutter-cupertino-date-picker/blob/master/example/lib/datetime_picker_bottom_sheet.dart

調起datetime_picker_bottom選擇器

//調起datetime_picker_bottom選擇器
  _cupertinoDateTimePicker(){
    DatePicker.showDatePicker(
      context,
      minDateTime: DateTime.parse('2010-05-12'), //起始日期
      maxDateTime: DateTime.parse('2021-11-25'), //終止日期
      initialDateTime: DateTime.parse(formatDate(_selectedDateTime, [yyyy, "-", mm, "-", "dd", " ", HH, ":", nn, ":", ss])), //當前日期時間
      dateFormat: "yyyy年M月d日    EEE,H時:m分", //顯示格式
      locale: DateTimePickerLocale.zh_cn, //語言
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
      ),
      pickerMode: DateTimePickerMode.datetime, // show TimePicker
      onCancel: () {
        debugPrint('onCancel');
      },
      onChange: (dateTime, List<int> index) {
        setState(() {
          _nowDate = dateTime;
        });
      },
      onConfirm: (dateTime, List<int> index) {
        setState(() {
          _nowDate = dateTime;
        });
      },
    );
  }

效果圖：

完整代碼：

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

class CupertinoTimePage extends StatefulWidget {
  CupertinoTimePage({Key key}) : super(key: key);

  @override
  _CupertinoTimePageState createState() => _CupertinoTimePageState();
}

class _CupertinoTimePageState extends State<CupertinoTimePage> {
  DateTime _nowDate = DateTime.now(); //當前日期
  DateTime _nowDateTime = DateTime.parse(formatDate(DateTime.now(), [yyyy, "-", mm, "-", "dd", " ", HH, ":", nn, ":", ss])); //當前日期時間

  //調起date_picker_bottom選擇器
  _cupertinoPicker(){
    DatePicker.showDatePicker(
      context,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('確定', style: TextStyle(color: Colors.red)), 
        cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
      ),
      minDateTime: DateTime.parse('2010-05-12'), //起始日期
      maxDateTime: DateTime.parse('2021-11-25'), //終止日期
      initialDateTime: _nowDate, //當前日期
      dateFormat: 'yyyy-MMMM-dd',  //顯示格式
      locale: DateTimePickerLocale.zh_cn, //語言 默認DateTimePickerLocale.en_us
      onClose: () => print("----- onClose -----"),
      onCancel: () => print('onCancel'),
      onChange: (dateTime, List<int> index) { //改變的時候
        setState(() {
          _nowDate = dateTime;
        });
      },
      onConfirm: (dateTime, List<int> index) { //確定的時候
        setState(() {
          _nowDate = dateTime;
        });
      },
    );
  }

  //調起datetime_picker_bottom選擇器
  _cupertinoDateTimePicker(){
    DatePicker.showDatePicker(
      context,
      minDateTime: DateTime.parse('2010-05-12'), //起始日期
      maxDateTime: DateTime.parse('2021-11-25'), //終止日期
      //initialDateTime: DateTime.parse(formatDate(_selectedDateTime, [yyyy, "-", mm, "-", "dd", " ", HH, ":", nn, ":", ss])),
      initialDateTime: _nowDateTime, //當前日期時間
      dateFormat: "yyyy年M月d日    EEE,H時:m分", //顯示格式
      locale: DateTimePickerLocale.zh_cn, //語言
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
      ),
      pickerMode: DateTimePickerMode.datetime, // show TimePicker
      onCancel: () {
        debugPrint('onCancel');
      },
      onChange: (dateTime, List<int> index) {
        setState(() {
          _nowDate = dateTime;
        });
      },
      onConfirm: (dateTime, List<int> index) {
        setState(() {
          _nowDate = dateTime;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    var _date = formatDate(_nowDate, [yyyy, "-", mm, "-", dd]);
    var _datetime = formatDate(_nowDate,[yyyy, "-", mm, "-", dd, " ", HH, ":", nn]);
    return Scaffold(
      appBar: AppBar(title: Text("第三方IOS時間選擇器演示頁面")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                onTap: _cupertinoPicker,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("${_date}"),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
              ),
            ]
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                onTap: _cupertinoDateTimePicker,
                child: Row(
                  children: <Widget>[
                    Text('${_datetime}'),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
              )
            ],
          )
        ]
      )        
    );
  }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flutter flutter_cupertino_date_picker 時間插件的用法 MySql 日期格式化函數date_format() mysql 中的日期格式。date_format( ) 轉換格式 sql的日期和時間函數–date_format MySQL日期格式化函數DATE_FORMAT使用說明 MySql用DATE_FORMAT截取DateTime字段的日期值 java代碼中的中文資源提取國際化 MySQL DATE_FORMAT() 函數 SQL DATE_FORMAT() 函數 MySQL DATE_FORMAT 函數