18.Flutter学习之路日期和时间戳，以及日期组件

日期

Flutter中获取当前日期可以使用DateTime.now()进行获取。now.millisecondsSinceEpoch可以获取到时间戳

class DatePickerPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _DatePickerPage();
  }

}

class _DatePickerPage extends State<DatePickerPage> {
  var now=DateTime.now();//获取当前时间

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print(now);// 2020-03-12 22:38:29.627608
    print(now.millisecondsSinceEpoch);//当前的时间戳 1584023909627
    print(DateTime.fromMillisecondsSinceEpoch(now.millisecondsSinceEpoch));//将时间戳转化为2020-03-12 22:38:29.627

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title:Text('DatePicker'),
      ),
      body: Text('日期组件'),
    );
  }
}

那如果我们想使用指定格式的时间呢？
这就可以使用第三方库来进行。

首先我们导入第三方库date_format

然后在我们的pubspec.yaml的进行配置

至于使用的话，我们可以参考该库的内容。

Flutter自带的日期组件

class DatePickerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _DatePickerPage();
  }
}

class _DatePickerPage extends State<DatePickerPage> {
  DateTime _nowDate = DateTime.now(); //获取当前时间

  /*showDatePicker(
  context: context,
  initialDate: _nowDate,
  firstDate: DateTime(1980), //开始日期
  lastDate: DateTime(2100) //结束日期
  ).then((onValue){         //then()当异步结束时，回调该方法
  print(onValue);
  });*/


  _showDatePicker() async {
    //async 将该操作进行异步 await等待异步结束
    var result = await showDatePicker(
            context: context,
            initialDate: _nowDate,
            firstDate: DateTime(1980), //开始日期
            lastDate: DateTime(2100) //结束日期
            );
    print(result); //与上述一致
    setState(() {
      _nowDate=result;
    });
  }
  var _time=TimeOfDay.now();
/*  _showTimePicker(){
    //系统自带的时间dialog
    showTimePicker(context: context, initialTime: _time).then((onValue){
      _time=onValue;
    });
  }*/

  _showTimePicker() async{
    //系统自带的时间dialog
   var  time=await showTimePicker(context: context, initialTime: _time);
    setState(() {
      _time=time;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('DatePicker'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            InkWell(
              //没有样式，带有点击时水波纹的效果
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('${_nowDate}'),
                  Icon(Icons.arrow_drop_down),
                ],
              ),
              onTap: _showDatePicker,
            ),
            InkWell(
              //没有样式，带有点击时水波纹的效果
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('${ _time}'),//选中后将其数据回调给Text
                  Icon(Icons.arrow_drop_down),
                ],
              ),
              onTap: _showTimePicker,
            )
          ],
        ));
  }
}

第三方日期组件

flutter_cupertino_date_picker
首先我们在我们的pubspec.yaml中进行配置。

dependencies:
	...
  flutter_cupertino_date_picker: ^1.0.12

导入包

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

进行展示

class DatePickerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _DatePickerPage();
  }
}

class _DatePickerPage extends State<DatePickerPage> {

 var _dateTime=DateTime.now();

  _showDatePicker() {
    DatePicker.showDatePicker(
      context,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('确定',style: TextStyle(color: Colors.red),),
        cancel: Text('取消',style: TextStyle(color: Colors.cyan),)
      ),
      minDateTime:DateTime.parse("1980-05-12"),  //最小时间
      maxDateTime: DateTime.parse("2021-05-12"),  //最大时间
      initialDateTime: _dateTime,          //初始化时间
      dateFormat: "yyyy-MMMM-dd",               //日期显示格式
      locale: DateTimePickerLocale.zh_cn ,     //国际化选择中国
      onCancel: (){   //点击取消的时间

      },
      onChange: (dateTime,List<int> index){ //选择的日期时间改变的事件
        setState(() {
            _dateTime=dateTime;
        });
      },
      onConfirm: (dateTime,List<int> index){  //点击确定时
        setState(() {
          _dateTime=dateTime;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('DatePicker'),
        ),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('$_dateTime'),
                    Icon(Icons.arrow_drop_down)
                  ],
                ),
                onTap: _showDatePicker,
              )
            ]));
  }
}