您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-21(官方自带日期组件[showDatePicker、showTimePicker]、第三方日期组件)

2020-04-30【Flutter】942人已围观

简介## 一、Flutter 日期和时间戳 **日期转化成时间戳：** ``` var now = new DateTime.now(); print(now.millisecondsSinceEpoch);//单位毫秒，13 位时间戳, print需要在body中打印出来 ``` **时间戳转化成日期：** ``` var now = new DateTime.now(); var a=now.millisecondsSinceEpoch; //时间戳 print(Dat

## 一、Flutter 日期和时间戳

**日期转化成时间戳：**

```
var now = new DateTime.now();
print(now.millisecondsSinceEpoch);//单位毫秒，13 位时间戳, print需要在body中打印出来
```

**时间戳转化成日期：**

```
var now = new DateTime.now();
var a=now.millisecondsSinceEpoch; //时间戳
print(DateTime.fromMillisecondsSinceEpoch(a));
```

## 二、Flutter  第三方库 date_format 的使用

[文档：https://pub.dev/packages/date_format](https://pub.dev/packages/date_format)

## 三、 调用 flutter 自带日期组件和时间组件

**日期组件：**

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320162713.png)

> async 写法

```
DateTime _nowDate = DateTime.now();// 当期日期
_showDatePicker() async{
   var result= await showDatePicker(
      context:context,
      initialDate:_nowDate,// 当期时间
      firstDate:DateTime(1980),// 开始年份
      lastDate:DateTime(2100),// 结束年份
     //  locale: Locale('zh'),      //非必须
    );
    setState(() {
       this._nowDate= result;
    });
}
```

> 第二种写法

```
DateTime _nowDate = DateTime.now();// 当期日期
_showDatePicker(){
   showDatePicker(
      context:context,
      initialDate:_nowDate,
      firstDate:DateTime(1980),
      lastDate:DateTime(2100),
    ).then((result){
       print(result);
       this._nowDate= result;
    });
}
```

**时间组件：**

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320162854.png)

```
var _nowTime=TimeOfDay(hour: DateTime.now().hour,minute: DateTime.now().minute);// 当期时间
_showTimePicker(){
    showTimePicker(
      context: context, 
      initialTime: _nowTime
    ).then((onValue){
      this._nowTime = onValue;
    });
  }
```

**body中触发**

```
InkWell(// 没有按钮效果，只有点击时间
  child:Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
    Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"),
    Icon(Icons.arrow_drop_down)
  ],),
  onTap: _showDatePicker,
),
InkWell(// 没有按钮效果，只有点击时间
  child:Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
    Text("${_nowTime.format(context)}"),
    Icon(Icons.arrow_drop_down)
  ],),
  onTap: _showTimePicker,
)
```

> 完整demo

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

class TimeDemoPage extends StatefulWidget {
  TimeDemoPage({Key key}) : super(key: key);
  _TimeDemoPageState createState() => _TimeDemoPageState();
}

class _TimeDemoPageState extends State<TimeDemoPage> {
  DateTime _nowDate = DateTime.now();// 当期日期
  var _nowTime=TimeOfDay(hour: DateTime.now().hour,minute: DateTime.now().minute);// 当期时间
  @override
  void initState() {
    super.initState();
  }

// 官方日期组件
  _showDatePicker() async{
    var result= await showDatePicker(
       context:context,
       initialDate:_nowDate,// 当期时间
       firstDate:DateTime(1980),// 开始年份
       lastDate:DateTime(2100),// 结束年份
      //  locale: Locale('zh'),      //非必须
     );
     setState(() {
        this._nowDate= result;
     });
  }

// 官方时间组件
  _showTimePicker(){
    showTimePicker(
      context: context, 
      initialTime: _nowTime
    ).then((onValue){
      this._nowTime = onValue;
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children:[
                InkWell(// 没有按钮效果，只有点击时间
                  child:Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                    Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"),
                    Icon(Icons.arrow_drop_down)
                  ],),
                  onTap: _showDatePicker,
                ),
                InkWell(// 没有按钮效果，只有点击时间
                  child:Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                    Text("${_nowTime.format(context)}"),
                    Icon(Icons.arrow_drop_down)
                  ],),
                  onTap: _showTimePicker,
                )
              ],
            )
          ],
        ),
    );
  }
}

```

## 四、 调用 flutter  自带日期组件和时间组件改为中文

** 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;
    });
  }
```

## 五、 调用 flutter 第三方时间组件

[文档地址：https://pub.dev/packages/flutter_cupertino_date_picker](https://pub.dev/packages/flutter_cupertino_date_picker)

> 日期

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320164300.png)

```
DateTime _nowDate = DateTime.now(); // 当期日期

void _showDatePicker2() {
  DatePicker.showDatePicker(
    context,
    pickerTheme: DateTimePickerTheme(
      showTitle: true,
      confirm: Text('确定', style: TextStyle(color: Colors.red)),
      cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
    ),
    minDateTime: DateTime.parse('1990-05-12'),
    maxDateTime: DateTime.parse("2021-11-25"),
    initialDateTime: _nowDate,
    dateFormat: 'yyyy-MMMM-dd',
    locale: DateTimePickerLocale.zh_cn,
    onCancel: () {
      debugPrint('onCancel');
    },
    onConfirm: (dateTime, List<int> index) {
      setState(() {
        _nowDate = dateTime;
      });
    },
  );
}
  
//------------Widget--------------//
  
InkWell(
  // 没有按钮效果，只有点击时间
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"),
      Icon(Icons.arrow_drop_down)
    ],
  ),
  onTap: _showDatePicker2,
)
```

> 日期加时间

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320164600.png)

```
DateTime _nowDate = DateTime.now(); // 当期日期

void _showDatePicker3() {
  DatePicker.showDatePicker(
    context,
    pickerTheme: DateTimePickerTheme(
      showTitle: true,
      confirm: Text('确定', style: TextStyle(color: Colors.red)),
      cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
    ),
    minDateTime: DateTime.parse('1990-05-12'),
    maxDateTime: DateTime.parse("2021-11-25"),
    initialDateTime: _nowDate,
    // 配置 Datetime Picker
    dateFormat: 'yyyy年 M月 d日 EEE,H 时:m 分',
    pickerMode: DateTimePickerMode.datetime,
    locale: DateTimePickerLocale.zh_cn,
    onCancel: () {
      debugPrint('onCancel');
    },
    onConfirm: (dateTime, List<int> index) {
      setState(() {
        _nowDate = dateTime;
      });
    },
  );
}
  
//------------Widget--------------//
  
InkWell(
  // 没有按钮效果，只有点击时间
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd, ' ', HH,':', nn])}"),
      Icon(Icons.arrow_drop_down)
    ],
  ),
  onTap: _showDatePicker3,
)
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-20(网络请求)

下一篇：flutter-22(轮播图 flutter_swiper 、AspectRatio 横纵比组件)