18. The date and time stamp of the Flutter learning path, and the date component

date

FlutterTo get the current date, you can use it DateTime.now()to get it. now.millisecondsSinceEpochTimestamp can be obtained

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('日期组件'),
    );
  }
}

So what if we want to use the time in the specified format?
This can be done using third-party libraries.

First we import the third-party library date_format

pubspec.yamlThen configure in our

As for the usage, we can refer to the contents of the library.

The date component that comes with 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,
            )
          ],
        ));
  }
}

Third-Party Date Components

flutter_cupertino_date_picker first we configure
in our .pubspec.yaml

dependencies:
	...
  flutter_cupertino_date_picker: ^1.0.12

import package

import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

show

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