date_range_form_field

一个用于将日期范围小部件添加到表单的 Flutter 包。日期选择器 UX 由 showDateRangePicker 提供。该小部件将接受 InputDecoration 或使用应用程序主题的默认设置。此外,该小部件还将接受日期格式,默认为 MM-dd-yyyy。

用法

此小部件应像表单中的任何其他 FormField 一样使用。
请注意,firstDate 和 lastDate 属性分别对应于第一个和最后一个有效日期。
此小部件必须具有 MaterialWidget 祖先,例如 MaterialApp

示例

91237186-f0440b80-e707-11ea-919f-846d0c6504c4

// Import package
import 'package:flutter/material.dart';
import 'package:date_range_form_field/date_range_form_field.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: MyFormField(),
    );
  }
}

// Make a form
class MyFormField extends StatefulWidget {
  @override
  _MyFormFieldState createState() => _MyFormFieldState();
}

GlobalKey myFormKey = new GlobalKey();

class _MyFormFieldState extends State<MyFormField> {
  DateTimeRange myDateRange;

  void _submitForm() {
    final FormState form = myFormKey.currentState;
    form.save();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Date Range Form Example"),
      ),
      body: SafeArea(
        child: Form(
          key: myFormKey,
          child: Column(
            children: [
              SafeArea(
                child: DateRangeField(
                    context: context,
                    decoration: InputDecoration(
                      labelText: 'Date Range',
                      prefixIcon: Icon(Icons.date_range),
                      hintText: 'Please select a start and end date',
                      border: OutlineInputBorder(),
                    ),
                    initialValue: DateTimeRange(
                        start: DateTime.now(), end: DateTime.now()),
                    validator: (value) {
                      if (value.start.isBefore(DateTime.now())) {
                        return 'Please enter a valid date';
                      }
                      return null;
                    },
                    onSaved: (value) {
                      setState(() {
                        myDateRange = value;
                      });
                    }),
              ),
              FlatButton(
                child: Text('Submit'),
                onPressed: _submitForm,
              ),
              if(myDateRange != null) Text("Saved value is: ${myDateRange.toString()}")
            ],
          ),
        ),
      ),
    );
  }
}

GitHub

https://github.com/JMAConsulting/date_range_form_field