日期/时间选择器表单字段

两个 Flutter 小部件,它们包装了一个 TextFormField 并集成了日期和/或时间选择器对话框。

Widget 描述
DateTimePickerFormField 用于使用日期选择器,以及可选的时间选择器。生成 `DateTime` 值。
TimePickerFormField 仅用于使用时间选择器。生成 `TimeOfDay` 值。

示例

screenshot

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
import 'package:datetime_picker_formfield/time_picker_formfield.dart';

const appName = 'DateTimePickerFormField Example';

void main() => runApp(MaterialApp(
      title: appName,
      home: MyHomePage(),
      theme: ThemeData.light().copyWith(
          inputDecorationTheme:
              InputDecorationTheme(border: OutlineInputBorder())),
    ));

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

class MyHomePageState extends State<MyHomePage> {
  final dateFormat = DateFormat("EEEE, MMMM d, yyyy 'at' h:mma");
  final timeFormat = DateFormat("h:mm a");
  DateTime date;
  TimeOfDay time;
  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: Text(appName)),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DateTimePickerFormField(
              format: dateFormat,
              decoration: InputDecoration(labelText: 'Date'),
              onChanged: (dt) => setState(() => date = dt),
            ),
            SizedBox(height: 16.0),
            TimePickerFormField(
              format: timeFormat,
              decoration: InputDecoration(labelText: 'Time'),
              onChanged: (t) => setState(() => time = t),
            ),
            SizedBox(height: 16.0),
            Text('date.toString(): $date', style: TextStyle(fontSize: 18.0)),
            SizedBox(height: 16.0),
            Text('time.toString(): $time', style: TextStyle(fontSize: 18.0)),
          ],
        ),
      ));
}

GitHub

https://github.com/jifalops/datetime_picker_formfield