Flutter - Date / Time / DateTime Picker Input Example

Do you need to display date or time picker on your Flutter application? This tutorial show you the simple way to display either datetime, date or time picker, including how to get the date value and setting initial value.

Dependencies

There is a package that allows us to easily create either datetime, date or time input. At the following to your pubspec.yaml and run Get Packages.

datetime_picker_formfield: ^0.1.8

Code Example

The datetime_picker_formfield has DateTimePickerFormField widget. Its inputType option is used to specify what type of input used for the widget instance. There are three options:

• InputType.both: Display date and time input.
• InputType.date: Display date only input.
• InputType.time: Display time only input.

format option whose value is of DateFormat type is used to determine how the date value is formatted - it will be displayed on the input field if the user has picked a date or time. You can also use decoration option to customize the input look, such as adding placeholder.

The date value is stored as a variable. Whenever the user change the value by using the picker, onChanged will be triggered. So, the most common thing you need to do inside onChanged is updating the date value. That means you can get the latest value from the variable. To set the initial value, use initialDate option with DateTime instance if the input type is both (datetime) or date, and use initialTime with TimeOfDay instance if the input type is time. Below are some examples of DateTimePickerFormField usage.

DateTime Picker

  DateTimePickerFormField(
    inputType: InputType.both,
    format: DateFormat("EEEE, MMMM d, yyyy 'at' h:mma"),
    editable: false,
    decoration: InputDecoration(
        labelText: 'DateTime',
        hasFloatingPlaceholder: false
    ),
    onChanged: (dt) {
      setState(() => date1 = dt);
      print('Selected date: $date1');
    },
  ),

Date Picker

  DateTimePickerFormField(
    inputType: InputType.date,
    format: DateFormat("yyyy-MM-dd"),
    initialDate: DateTime(2019, 1, 1),
    editable: false,
    decoration: InputDecoration(
        labelText: 'Date',
        hasFloatingPlaceholder: false
    ),
    onChanged: (dt) {
      setState(() => date2 = dt);
      print('Selected date: $date2');
    },
  ),

Time Picker

  DateTimePickerFormField(
    inputType: InputType.time,
    format: DateFormat("HH:mm"),
    initialTime: TimeOfDay(hour: 5, minute: 5),
    editable: false,
    decoration: InputDecoration(
        labelText: 'Time',
        hasFloatingPlaceholder: false
    ),
    onChanged: (dt) {
      setState(() => date3 = dt);
      print('Selected date: $date3');
      print('Hour: $date3.hour');
      print('Minute: $date3.minute');
    },
  ),

Full Code

  import 'package:flutter/material.dart';
  import 'package:intl/intl.dart';
  import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
  
  class DateTimePickerExample extends StatefulWidget {
    @override
    _DateTimePickerExampleState createState() {
      return _DateTimePickerExampleState();
    }
  }
  
  class _DateTimePickerExampleState extends State<DateTimePickerExample> {
    DateTime date1;
    DateTime date2;
    DateTime date3;
  
    @override
    Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: const Text('DateTime Picker Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DateTimePickerFormField(
              inputType: InputType.both,
              format: DateFormat("EEEE, MMMM d, yyyy 'at' h:mma"),
              editable: false,
              decoration: InputDecoration(
                  labelText: 'DateTime',
                  hasFloatingPlaceholder: false
              ),
              onChanged: (dt) {
                setState(() => date1 = dt);
                print('Selected date: $date1');
              },
            ),
            DateTimePickerFormField(
              inputType: InputType.date,
              format: DateFormat("yyyy-MM-dd"),
              initialDate: DateTime(2019, 1, 1),
              editable: false,
              decoration: InputDecoration(
                  labelText: 'Date',
                  hasFloatingPlaceholder: false
              ),
              onChanged: (dt) {
                setState(() => date2 = dt);
                print('Selected date: $date2');
              },
            ),
            DateTimePickerFormField(
              inputType: InputType.time,
              format: DateFormat("HH:mm"),
              initialTime: TimeOfDay(hour: 5, minute: 5),
              editable: false,
              decoration: InputDecoration(
                  labelText: 'Time',
                  hasFloatingPlaceholder: false
              ),
              onChanged: (dt) {
                setState(() => date3 = dt);
                print('Selected date: $date3');
                print('Hour: $date3.hour');
                print('Minute: $date3.minute');
              },
            ),
            SizedBox(height: 16.0),
          ],
        ),
      )
    );
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: DateTimePickerExample(),
      );
    }
  }
  
  Future<void> main() async {
    runApp(MyApp());
  }