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

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

Notice

这来自m3uzz/date_time_picker，因为原作者已不活跃。

将接受PR并尝试解决问题。

date_time_picker_selector

这是一个Flutter小部件，用于显示一个文本表单字段来展示日期或时钟对话框。此小部件扩展了TextField，并且行为类似于TextFormField。

Usage

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

dependencies:
  ...
  date_time_picker_selector: "^2.1.0"

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

import 'package:date_time_picker_selector/date_time_picker_selector.dart';

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

Example

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.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) {
    // 禁用周末从日历中选择
    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参数进行设置。

Preview

概述

示例代码

import 'package:date_time_picker_selector/date_time_picker_selector.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DateTimePicker Demo',
      home: MyHomePage(),
      localizationsDelegates: [
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [Locale('en', 'US')], //, Locale('pt', 'BR')],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormState> _oFormKey = GlobalKey<FormState>();
  late TextEditingController _controller1;
  late TextEditingController _controller2;
  late TextEditingController _controller3;
  late TextEditingController _controller4;

  //String _initialValue = '';
  String _valueChanged1 = '';
  String _valueToValidate1 = '';
  String _valueSaved1 = '';
  String _valueChanged2 = '';
  String _valueToValidate2 = '';
  String _valueSaved2 = '';
  String _valueChanged3 = '';
  String _valueToValidate3 = '';
  String _valueSaved3 = '';
  String _valueChanged4 = '';
  String _valueToValidate4 = '';
  String _valueSaved4 = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    Intl.defaultLocale = 'pt_BR';
    //_initialValue = DateTime.now().toString();
    _controller1 = TextEditingController(text: DateTime.now().toString());
    _controller2 = TextEditingController(text: DateTime.now().toString());
    _controller3 = TextEditingController(text: DateTime.now().toString());

    String lsHour = TimeOfDay.now().hour.toString().padLeft(2, '0');
    String lsMinute = TimeOfDay.now().minute.toString().padLeft(2, '0');
    _controller4 = TextEditingController(text: '$lsHour:$lsMinute');

    _getValue();
  }

  /// 这个实现只是为了模拟从sqlite数据库或API加载数据的行为
  Future<void> _getValue() async {
    await Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        //_initialValue = '2000-10-22 14:30';
        _controller1.text = '2000-09-20 14:30';
        _controller2.text = '2001-10-21 15:31';
        _controller3.text = '2002-11-22';
        _controller4.text = '17:01';
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter DateTimePicker Demo'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.only(left: 20, right: 20, top: 10),
        child: Form(
          key: _oFormKey,
          child: Column(
            children: <Widget>[
              DateTimePicker(
                type: DateTimePickerType.dateTimeSeparate,
                dateMask: 'd MMM, yyyy',
                controller: _controller1,
                //initialValue: _initialValue,
                firstDate: DateTime(2000),
                lastDate: DateTime(2100),
                icon: Icon(Icons.event),
                dateLabelText: 'Date',
                timeLabelText: "Hour",
                //use24HourFormat: false,
                //locale: Locale('pt', 'BR'),
                selectableDayPredicate: (date) {
                  if (date.weekday == 6 || date.weekday == 7) {
                    return false;
                  }
                  return true;
                },
                onChanged: (val) => setState(() => _valueChanged1 = val),
                validator: (val) {
                  setState(() => _valueToValidate1 = val ?? '');
                  return null;
                },
                onSaved: (val) => setState(() => _valueSaved1 = val ?? ''),
              ),
              DateTimePicker(
                type: DateTimePickerType.dateTime,
                dateMask: 'd MMMM, yyyy - hh:mm a',
                controller: _controller2,
                //initialValue: _initialValue,
                firstDate: DateTime(2000),
                lastDate: DateTime(2100),
                //icon: Icon(Icons.event),
                dateLabelText: 'Date Time',
                use24HourFormat: false,
                locale: Locale('en', 'US'),
                onChanged: (val) => setState(() => _valueChanged2 = val),
                validator: (val) {
                  setState(() => _valueToValidate2 = val ?? '');
                  return null;
                },
                onSaved: (val) => setState(() => _valueSaved2 = val ?? ''),
              ),
              DateTimePicker(
                type: DateTimePickerType.date,
                //dateMask: 'yyyy/MM/dd',
                controller: _controller3,
                //initialValue: _initialValue,
                firstDate: DateTime(2000),
                lastDate: DateTime(2100),
                icon: Icon(Icons.event),
                dateLabelText: 'Date',
                locale: Locale('pt', 'BR'),
                onChanged: (val) => setState(() => _valueChanged3 = val),
                validator: (val) {
                  setState(() => _valueToValidate3 = val ?? '');
                  return null;
                },
                onSaved: (val) => setState(() => _valueSaved3 = val ?? ''),
              ),
              DateTimePicker(
                type: DateTimePickerType.time,
                //timePickerEntryModeInput: true,
                //controller: _controller4,
                initialValue: '', //_initialValue,
                icon: Icon(Icons.access_time),
                timeLabelText: "Time",
                use24HourFormat: false,
                locale: Locale('pt', 'BR'),
                onChanged: (val) => setState(() => _valueChanged4 = val),
                validator: (val) {
                  setState(() => _valueToValidate4 = val ?? '');
                  return null;
                },
                onSaved: (val) => setState(() => _valueSaved4 = val ?? ''),
              ),
              SizedBox(height: 20),
              Text(
                'DateTimePicker 数据值 onChanged:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              SelectableText(_valueChanged1),
              SelectableText(_valueChanged2),
              SelectableText(_valueChanged3),
              SelectableText(_valueChanged4),
              SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  final loForm = _oFormKey.currentState;

                  if (loForm?.validate() == true) {
                    loForm?.save();
                  }
                },
                child: Text('提交'),
              ),
              SizedBox(height: 30),
              Text(
                'DateTimePicker 数据值 validator:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              SelectableText(_valueToValidate1),
              SelectableText(_valueToValidate2),
              SelectableText(_valueToValidate3),
              SelectableText(_valueToValidate4),
              SizedBox(height: 10),
              Text(
                'DateTimePicker 数据值 onSaved:',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              SelectableText(_valueSaved1),
              SelectableText(_valueSaved2),
              SelectableText(_valueSaved3),
              SelectableText(_valueSaved4),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  final loForm = _oFormKey.currentState;
                  loForm?.reset();

                  setState(() {
                    _valueChanged1 = '';
                    _valueChanged2 = '';
                    _valueChanged3 = '';
                    _valueChanged4 = '';
                    _valueToValidate1 = '';
                    _valueToValidate2 = '';
                    _valueToValidate3 = '';
                    _valueToValidate4 = '';
                    _valueSaved1 = '';
                    _valueSaved2 = '';
                    _valueSaved3 = '';
                    _valueSaved4 = '';
                  });

                  _controller1.clear();
                  _controller2.clear();
                  _controller3.clear();
                  _controller4.clear();
                },
                child: Text('重置'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter日期时间选择器插件date_time_picker_selector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日期时间选择器插件date_time_picker_selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用Flutter日期时间选择器插件 date_time_picker_selector 的代码示例。这个插件允许你在Flutter应用中方便地选择日期和时间。

首先，确保你已经在 pubspec.yaml 文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  date_time_picker_selector: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 以安装依赖。

接下来，你可以在你的 Dart 文件中使用 DateTimePickerSelector。以下是一个完整的示例，展示了如何在一个简单的Flutter应用中集成并使用该插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DateTimePickerSelector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDateTime;

  void _selectDateTime() async {
    final DateTimePickerSelectorResult result = await DateTimePickerSelector.builder(
      context,
      initialDateTime: selectedDateTime ?? DateTime.now(),
      locale: Localizations.localeOf(context),
      dateTimePickerStyle: DateTimePickerStyle(
        title: 'Select Date & Time',
        confirmText: 'Confirm',
        cancelText: 'Cancel',
        datePickerStyle: DatePickerStyle(
          backgroundColor: Colors.white,
          titleTextStyle: TextStyle(color: Colors.black),
          dayTextStyle: TextStyle(color: Colors.black),
          monthTextStyle: TextStyle(color: Colors.black),
          yearTextStyle: TextStyle(color: Colors.black),
        ),
        timePickerStyle: TimePickerStyle(
          backgroundColor: Colors.white,
          titleTextStyle: TextStyle(color: Colors.black),
          cancelTextStyle: TextStyle(color: Colors.black),
          confirmTextStyle: TextStyle(color: Colors.black),
          dialTextStyle: TextStyle(color: Colors.black),
        ),
      ),
      dateTimePickerModes: [
        DateTimePickerMode.date,
        DateTimePickerMode.time,
        DateTimePickerMode.datetime,
      ],
      is24HourFormat: true,
    ).show();

    if (result.confirmed) {
      setState(() {
        selectedDateTime = result.dateTime;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DateTimePickerSelector Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDateTime == null
                  ? 'No date selected'
                  : 'Selected Date: ${selectedDateTime!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _selectDateTime,
              child: Text('Select Date & Time'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们定义了一个 MyApp 和 MyHomePage 组件，其中 MyHomePage 是包含主要逻辑的有状态组件。
  2. selectedDateTime 是一个可空的 DateTime 对象，用于存储用户选择的日期和时间。
  3. _selectDateTime 方法使用 DateTimePickerSelector.builder 方法来显示日期时间选择器。用户的选择结果会通过回调返回。
  4. 如果用户确认了选择，我们将 selectedDateTime 更新为用户选择的日期和时间。
  5. 在 build 方法中，我们显示当前选择的日期和时间，并提供一个按钮让用户选择日期和时间。

这个示例展示了如何基本使用 date_time_picker_selector 插件，你可以根据需要进行进一步的自定义和扩展。

回到顶部