flutter基础知识学习笔记-Date

时间与时间戳

常见用法

• 时间转时间戳

// 获取当前时间
var now = DateTime.now();
// 获取13位时间戳
var timespace = now.millisecondsSinceEpoch;
print(timespace);

• 时间戳转时间

// 时间戳转时间
// 注意需要是13位的时间戳 要不然可能不对
// 这里要特别注意 fromMillisecondsSinceEpoch,fromMicrosecondsSinceEpoch
var date1 = DateTime.fromMillisecondsSinceEpoch(timespace);
//fromMicrosecondsSinceEpoch 位数更多
var date3 = DateTime.fromMicrosecondsSinceEpoch(1682817395000000);

• 字符串转时间DateTime

主要需要注意的是DateTime的初始化函数，没有为我们提供类似客户端的YYYY-MM-DD、MM-HH这样的格式化配置（这里也可能是我自己没找到，网上我查的资料全是跳转到date_format这个组件库了，总之我现在不知道是啥情况）

var date2 = DateTime.parse("2012-02-27");
print(date2);
print(date2.millisecondsSinceEpoch);

date_format组件

pub.dev: pub.dev/packages/da…

• 作用

将string格式化为DateTime,可以想象为多加了一层YYYY-MM-DD、MM-HH这样的格式化配置层。

• 初始化方法

DateTime ：需要我们传入一个DateTime的对象
List<String> formats： :字符串数组

String formatDate(DateTime date, List<String> formats,

{DateLocale locale = const EnglishDateLocale()}) {}

• 使用

print(formatDate(DateTime.now(), [yyyy,"年",mm,"月",dd]));
print(formatDate(DateTime.now(), [yyyy,"-",mm,"-",dd]));
print(formatDate(DateTime.now(), [mm,"月",dd]));
print(formatDate(DateTime.now(), [mm,"月",dd,"日",HH,"时",nn,"分"]));

打印结果

flutter: 2023年04月30
flutter: 2023-04-30
flutter: 04月30
flutter: 04月30日10时17分

时间选择器

系统自带showDatePicker组件

初始化方法，结果返回一个DateTime类。

Future<DateTime?> showDatePicker({
required BuildContext context,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,
Locale? locale,
})async {}

使用

_showDatePicker() async {
var result = await showDatePicker(context: context,
initialDate: DateTime(2022),
firstDate: DateTime(1970),
lastDate: DateTime.now(),
locale: Locale('zh'));
}

效果图

CalendarDatePicker 组件

描述

[showDatePicker], which creates a Dialog that contains a [CalendarDatePicker] and provides an optional compact view where the
user can enter a date as a line of text.

说白了 showDatePicker的内部实现借助CalendarDatePicker来实现的，它本身是一个StatefulWidget,我们在页面布局的时候可以直接使用。

构建一个CalendarDatePicker组件

CalendarDatePicker(
firstDate: DateTime(1970),
initialDate: _nowDate,
lastDate: DateTime.now(),
onDateChanged: (time) {
print("选择器时间发生改变");},
);

效果示意图

系统自带showDatePicker组件

认识TimeOfDay

A value representing a time during the day, independent of the date that day might fall on or the time zone.

The time is represented by [hour](https://api.flutter.dev/flutter/material/material/TimeOfDay/hour.html) and [minute](https://api.flutter.dev/flutter/material/material/TimeOfDay/minute.html) pair. Once created, both values cannot be changed.

初始化方法

参数: TimeOfDay initialTime

Future<TimeOfDay?> showTimePicker({
required BuildContext context,
required TimeOfDay initialTime,
TransitionBuilder? builder,
bool useRootNavigator = true,
TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial,
String? cancelText,
String? confirmText,
String? helpText,
String? errorInvalidText,
String? hourLabelText,
String? minuteLabelText,
RouteSettings? routeSettings,
EntryModeChangeCallback? onEntryModeChanged,
Offset? anchorPoint,
}) async { }

使用

  _showTimePicker() async {
    var result = await showTimePicker(context: context, initialTime: _nowTime);
    setState(() {
      if (result != null) {
        this._nowTime = result;
      }
    });
  }

效果图

flutter_datetime_picker组件

pub.dev ： pub.dev/packages/fl…

• DatePicker
• TimePicker

DatePicker

DatePicker.showDatePicker(context,
    showTitleActions: true,
    minTime: DateTime(1970, 3, 5),
    maxTime: DateTime.now(), onChanged: (date) {
        print('change $date');
    }, onConfirm: (date) {
       print('confirm $date');
    }, currentTime: DateTime.now(), locale: LocaleType.zh);           

TimePicker

DatePicker.showDateTimePicker(context,onConfirm: (time) {});