Date and Time Picker In Flutter

In this article, we will explore the Date and Time Picker in a flutter. We will not be using any package in this application. We will use some core functions available in flutter to achieve this. We will implement a demo of the Date and Time Picker in your flutter applications.

Table of Contents :

Date And Time Picker

Code Implementation

Code File

Conclusion

Date And Time Picker

A date and time picker for a flutter, you can choose date/time / date&time in English, Dutch, and any other language you will want, and you can also custom your own picker content.

Demo Module ::

Demo.gif

Code Implementation

Create a new dart file called DateTimePicker.dart inside the lib folder.

In this screen, You will be able to choose the date and time by tapping on them in your Application.

Future<Null> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      initialDatePickerMode: DatePickerMode.day,
      firstDate: DateTime(2015),
      lastDate: DateTime(2101));
  if (picked != null)
    setState(() {
      selectedDate = picked;
      _dateController.text = DateFormat.yMd().format(selectedDate);
    });
}

Initialize DateTime pickers class.that will save our picked Date.

And in onTap of TextFromField, we call _selectDate function then the show will be shown the picker and save the picked date and time.

InkWell(
  onTap: () {
    _selectDate(context);
  },
  child: Container(
    width: _width / 1.7,
    height: _height / 9,
    margin: EdgeInsets.only(top: 30),
    alignment: Alignment.center,
    decoration: BoxDecoration(color: Colors.grey[200]),
    child: TextFormField(
      style: TextStyle(fontSize: 40),
      textAlign: TextAlign.center,
      enabled: false,
      keyboardType: TextInputType.text,
      controller: _dateController,
      onSaved: (String val) {
        _setDate = val;
      },
      decoration: InputDecoration(
          disabledBorder:
              UnderlineInputBorder(borderSide: BorderSide.none),
         contentPadding: EdgeInsets.only(top: 0.0)),
    ),
  ),
),

It is just a _selectTime function, as shown down here.

Future<Null> _selectTime(BuildContext context) async {
  final TimeOfDay picked = await showTimePicker(
    context: context,
    initialTime: selectedTime,
  );
  if (picked != null)
    setState(() {
      selectedTime = picked;
      _hour = selectedTime.hour.toString();
      _minute = selectedTime.minute.toString();
      _time = _hour + ' : ' + _minute;
      _timeController.text = _time;
      _timeController.text = formatDate(
          DateTime(2019, 08, 1, selectedTime.hour, selectedTime.minute),
          [hh, ':', nn, " ", am]).toString();
    });}

Initializing TimeOfDay pickers class that will save our picked Time in _selecteTime Function.

On Tapping at TextFormField , We call a _selectTime Function which will show the date & time picker saving the picked time .

InkWell(
  onTap: () {
    _selectTime(context);
  },
  child: Container(
    margin: EdgeInsets.only(top: 30),
    width: _width / 1.7,
    height: _height / 9,
    alignment: Alignment.center,
    decoration: BoxDecoration(color: Colors.grey[200]),
    child: TextFormField(
      style: TextStyle(fontSize: 40),
      textAlign: TextAlign.center,
      onSaved: (String val) {
        _setTime = val;
      },
      enabled: false,
      keyboardType: TextInputType.text,
      controller: _timeController,
      decoration: InputDecoration(
          disabledBorder:
              UnderlineInputBorder(borderSide: BorderSide.none),
          // labelText: 'Time',
          contentPadding: EdgeInsets.all(5)),
    ),
  ),
),

Code Implementation :

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

class DateTimePicker extends StatefulWidget {
  @override
  _DateTimePickerState createState() => _DateTimePickerState();
}

class _DateTimePickerState extends State<DateTimePicker> {
  double _height;
  double _width;

  String _setTime, _setDate;

  String _hour, _minute, _time;

  String dateTime;

  DateTime selectedDate = DateTime.now();

  TimeOfDay selectedTime = TimeOfDay(hour: 00, minute: 00);

  TextEditingController _dateController = TextEditingController();
  TextEditingController _timeController = TextEditingController();

  Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        initialDatePickerMode: DatePickerMode.day,
        firstDate: DateTime(2015),
        lastDate: DateTime(2101));
    if (picked != null)
      setState(() {
        selectedDate = picked;
        _dateController.text = DateFormat.yMd().format(selectedDate);
      });
  }

  Future<Null> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: selectedTime,
    );
    if (picked != null)
      setState(() {
        selectedTime = picked;
        _hour = selectedTime.hour.toString();
        _minute = selectedTime.minute.toString();
        _time = _hour + ' : ' + _minute;
        _timeController.text = _time;
        _timeController.text = formatDate(
            DateTime(2019, 08, 1, selectedTime.hour, selectedTime.minute),
            [hh, ':', nn, " ", am]).toString();
      });
  }

  @override
  void initState() {
    _dateController.text = DateFormat.yMd().format(DateTime.now());

    _timeController.text = formatDate(
        DateTime(2019, 08, 1, DateTime.now().hour, DateTime.now().minute),
        [hh, ':', nn, " ", am]).toString();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _height = MediaQuery.of(context).size.height;
    _width = MediaQuery.of(context).size.width;
    dateTime = DateFormat.yMd().format(DateTime.now());
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Date time picker'),
      ),
      body: Container(
        width: _width,
        height: _height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Column(
              children: <Widget>[
                Text(
                  'Choose Date',
                  style: TextStyle(
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5),
                ),
                InkWell(
                  onTap: () {
                    _selectDate(context);
                  },
                  child: Container(
                    width: _width / 1.7,
                    height: _height / 9,
                    margin: EdgeInsets.only(top: 30),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: Colors.grey[200]),
                    child: TextFormField(
                      style: TextStyle(fontSize: 40),
                      textAlign: TextAlign.center,
                      enabled: false,
                      keyboardType: TextInputType.text,
                      controller: _dateController,
                      onSaved: (String val) {
                        _setDate = val;
                      },
                      decoration: InputDecoration(
                          disabledBorder:
                              UnderlineInputBorder(borderSide: BorderSide.none),
                          // labelText: 'Time',
                          contentPadding: EdgeInsets.only(top: 0.0)),
                    ),
                  ),
                ),
              ],
            ),
            Column(
              children: <Widget>[
                Text(
                  'Choose Time',
                  style: TextStyle(
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5),
                ),
                InkWell(
                  onTap: () {
                    _selectTime(context);
                  },
                  child: Container(
                    margin: EdgeInsets.only(top: 30),
                    width: _width / 1.7,
                    height: _height / 9,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: Colors.grey[200]),
                    child: TextFormField(
                      style: TextStyle(fontSize: 40),
                      textAlign: TextAlign.center,
                      onSaved: (String val) {
                        _setTime = val;
                      },
                      enabled: false,
                      keyboardType: TextInputType.text,
                      controller: _timeController,
                      decoration: InputDecoration(
                          disabledBorder:
                              UnderlineInputBorder(borderSide: BorderSide.none),
                          // labelText: 'Time',
                          contentPadding: EdgeInsets.all(5)),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion :

In this article, I have explained a date time picker demo, you can modify and experiment according to your own, this little introduction was from the date time picker from our side.

I hope this blog helps will provide you with sufficient information in Trying up the Date Time Picker in your flutter project. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.