Date&Time Picker Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
Date-Time-Picker
Date-Time-Picker

In this article, we will learn about a simple way to display either date, or time, or Date&Time Picker Widget using library datetime_picker_formfield: ^0.1.8  along with 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 pubspec.yaml and run Get Packages.

datetime_picker_formfield: ^0.1.8

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 available as listed below:

1. InputType.both: Display date and time input.
2. InputType.date: Display date only input.
3. 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.Users can also use decoration options to customize the input look, such as adding placeholders.

The date value is stored as a variable. Whenever the user changes 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.

Code Snippet will look like below :

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');
            },
          ),

Complete Source Code :

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


class DateTimePickerWidget extends StatefulWidget {
  @override
  _DateTimePickerWidgetState createState() => _DateTimePickerWidgetState();
}

class _DateTimePickerWidgetState extends State<DateTimePickerWidget> {
    DateTime date1;
    DateTime date2;
    DateTime date3;
  @override
  Widget build(BuildContext context) {
    return 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),
        ],
      ),
    );
  }
}

In the above code snippet, we have used a TextField Widget to display the value of  Date Picker or Time Picker or Date&amp; Time Picker Widget. We will get output like below:

Date-Time-Picker

Date&Time Picker Widget 

Date-Time-Picker

Kindly do let us know your suggestion/feedback to serve you better.

Thanks for reading !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply