日期时间选择器

一个Flutter小部件，用于显示一个文本表单字段，以显示日期或时钟对话框。这个小部件扩展了TextField，并具有与TextFormField相似的行为。

date_time_picker

用法

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  date_time_picker: "^1.0.2"

在您的库中添加以下导入

import 'package:date_time_picker/date_time_picker.dart';

要开始使用 Flutter，请查看在线 文档。

示例

DateTimePicker有四种显示方式，可以在type参数中定义

  • DateTimePickerType.date将显示一个文本字段，点击时会弹出日期选择器对话框；
  • DateTimePickerType.time将显示一个文本字段，点击时会弹出时间选择器对话框；
  • DateTimePickerType.dateTime将显示一个文本字段，点击时会依次弹出日期选择器对话框和时间选择器对话框；
  • DateTimePickerType.dateTimeSeparated将并排显示两个文本字段，第一个用于日期，第二个用于时间。在点击时，每个字段都会显示其相应的对话框，即日期选择器和时间选择器；
DateTimePicker(
  type: date, // options: [date | time | dateTime | dateTimeSeparated], default is date
  ...
)

initialValue或controller.text可以是null、空字符串或DateTime字符串，否则将抛出错误。

DateTimePicker(
  initialValue: '',
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  dateLabelText: 'Date',
  onChanged: (val) => print(val),
  validator: (val) {
    print(val);
    return null;
  },
  onSaved: (val) => print(val),
);

更完整的示例

DateTimePicker(
  type: DateTimePickerType.dateTimeSeparate,
  dateMask: 'd MMM, yyyy',
  initialValue: DateTime.now().toString(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  icon: Icon(Icons.event),
  dateLabelText: 'Date',
  timeLabelText: "Hour",
  selectableDayPredicate: (date) {
    // Disable weekend days to select from the calendar
    if (date.weekday == 6 || date.weekday == 7) {
      return false;
    }

    return true;
  },
  onChanged: (val) => print(val),
  validator: (val) {
    print(val);
    return null;
  },
  onSaved: (val) => print(val),
);

onChanged、validator和onSaved中val的结果将是DateTime字符串或只是一个Time字符串

  • 例如：[2020-07-20 14:30] 或 [15:30] DateTimePickerType.time；
  • 月份、日期、小时和分钟将是2位数，时间始终是24小时制；
  • 但是文本字段中的显示可以通过dateMask参数进行格式化。

GitHub

https://github.com/m3uzz/date_time_picker