Flutter日期时间选择器插件date_time_picker_eazy的使用

date_time_picker_eazy

一个用于显示日期或时间对话框的Flutter小部件。该小部件扩展了TextField，并具有与TextFormField类似的行为。

使用方法

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

dependencies:
  ...
  flutter_date_time_picker_eazy: "^1.0.0"

在您的库中添加以下导入：

import 'package:flutter_date_time_picker_eazy/flutter_date_time_picker_eazy.dart';

有关如何开始使用Flutter的更多信息，请参阅在线文档。

示例

DateTimePicker有四种展示方式，可以通过type参数定义：

• DateTimePickerType.date：展示一个文本字段，点击后显示日期选择器对话框；
• DateTimePickerType.time：展示一个文本字段，点击后显示时间选择器对话框；
• DateTimePickerType.dateTime：展示一个文本字段，点击后先显示日期选择器对话框，再显示时间选择器对话框；
• DateTimePickerType.dateTimeSeparated：展示两个并排的文本字段，第一个用于日期，第二个用于时间。点击时分别显示日期选择器和时间选择器对话框。

DateTimePicker(
  type: DateTimePickerType.date, // 可选值：[date | time | dateTime | dateTimeSeparated]，默认为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.dateTimeSeparated,
  dateMask: 'd MMM, yyyy',
  initialValue: DateTime.now().toString(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  icon: Icon(Icons.event),
  dateLabelText: 'Date',
  timeLabelText: "Hour",
  selectableDayPredicate: (date) {
    // 禁用周末从日历中选择
    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字符串或仅是一个时间字符串：

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

预览

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用date_time_picker_eazy插件：

import 'package:flutter/material.dart';
import 'package:flutter_date_time_picker_eazy/flutter_date_time_picker_eazy.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('日期时间选择器示例'),
        ),
        body: Center(
          child: DateTimePickerExample(),
        ),
      ),
    );
  }
}

class DateTimePickerExample extends StatefulWidget {
  [@override](/user/override)
  _DateTimePickerExampleState createState() => _DateTimePickerExampleState();
}

class _DateTimePickerExampleState extends State<DateTimePickerExample> {
  String _selectedDate = '';
  String _selectedTime = '';

  void _handleDateChanged(String date) {
    setState(() {
      _selectedDate = date;
    });
  }

  void _handleTimeChanged(String time) {
    setState(() {
      _selectedTime = time;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('选择的日期: $_selectedDate'),
        DateTimePicker(
          type: DateTimePickerType.date,
          dateLabelText: '选择日期',
          onChanged: _handleDateChanged,
        ),
        SizedBox(height: 20),
        Text('选择的时间: $_selectedTime'),
        DateTimePicker(
          type: DateTimePickerType.time,
          timeLabelText: '选择时间',
          onChanged: _handleTimeChanged,
        ),
      ],
    );
  }
}