Date Picker In Flutter

DatePicker is a material widget in a flutter that lets the user select a date. Since there is no widget available for creating a date picker we will use showDatePicker() function.

It will display a Material Design date picker in a dialog by calling flutter’s inbuilt function. We will use it in instances like booking a movie ticket, train ticket, etc.

A date picker is a helpful addition to your UI that makes it easy for your app users to select dates from a calendar. Whether you’re adding a date of birth field to a registration form or offering time slots for users to book an appointment, you can use a date picker library to simplify the process.

You may also check our flutter app development services

Date Picker in Flutter

The Flutter Datetime Picker is easy to customize, supporting date and time selection in multiple languages. Flutter Datetime Picker is simple to install and provides a sleek, user-friendly interface.

Lets Start implementation

Add package

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

dependencies:

flutter:

sdk: flutter

intl: ^0.17.0

Code to pick date

               DateTime? pickedDate = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime(1950),
                    //DateTime.now() - not to allow to choose before today.
                    lastDate: DateTime(2100));

                if (pickedDate != null) {
                  print(
                      pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000
                  String formattedDate =
                      DateFormat('yyyy-MM-dd').format(pickedDate);
                  print(
                      formattedDate); //formatted date output using intl package =>  2021-03-16
                  setState(() {
                    dateInput.text =
                        formattedDate; //set output date to TextField value.
                  });
                } else {}

DateTime? pickedDate = await showDatePicker(

context: context,

initialDate: DateTime.now(),

firstDate: DateTime(1950),

//DateTime.now() - not to allow to choose before today.

lastDate: DateTime(2100));

if (pickedDate != null) {

print(

pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000

String formattedDate =

DateFormat('yyyy-MM-dd').format(pickedDate);

print(

formattedDate); //formatted date output using intl package => 2021-03-16

setState(() {

dateInput.text =

formattedDate; //set output date to TextField value.

});

} else {}

Complete Code for Date Picker In Flutter

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Date Picker",
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePage();
  }
}

class _HomePage extends State<HomePage> {
  TextEditingController dateInput = TextEditingController();

  @override
  void initState() {
    dateInput.text = ""; //set the initial value of text field
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("DatePicker in Flutter"),
          backgroundColor: Colors.redAccent, //background color of app bar
        ),
        body: Container(
            padding: EdgeInsets.all(15),
            height: MediaQuery.of(context).size.width / 3,
            child: Center(
                child: TextField(
              controller: dateInput,
              //editing controller of this TextField
              decoration: InputDecoration(
                  icon: Icon(Icons.calendar_today), //icon of text field
                  labelText: "Enter Date" //label text of field
                  ),
              readOnly: true,
              //set it true, so that user will not able to edit text
              onTap: () async {
                DateTime? pickedDate = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime(1950),
                    //DateTime.now() - not to allow to choose before today.
                    lastDate: DateTime(2100));

                if (pickedDate != null) {
                  print(
                      pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000
                  String formattedDate =
                      DateFormat('yyyy-MM-dd').format(pickedDate);
                  print(
                      formattedDate); //formatted date output using intl package =>  2021-03-16
                  setState(() {
                    dateInput.text =
                        formattedDate; //set output date to TextField value.
                  });
                } else {}
              },
            ))));
  }
}

import 'package:flutter/material.dart';

import 'package:intl/intl.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: "Date Picker",

home: HomePage(),

);

}

class HomePage extends StatefulWidget {

@override

State<StatefulWidget> createState() {

return _HomePage();

}

class _HomePage extends State<HomePage> {

TextEditingController dateInput = TextEditingController();

@override

void initState() {

dateInput.text = ""; //set the initial value of text field

super.initState();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("DatePicker in Flutter"),

backgroundColor: Colors.redAccent, //background color of app bar

body: Container(

padding: EdgeInsets.all(15),

height: MediaQuery.of(context).size.width / 3,

child: Center(

child: TextField(

controller: dateInput,

//editing controller of this TextField

decoration: InputDecoration(

icon: Icon(Icons.calendar_today), //icon of text field

labelText: "Enter Date" //label text of field

readOnly: true,

//set it true, so that user will not able to edit text

onTap: () async {

DateTime? pickedDate = await showDatePicker(

context: context,

initialDate: DateTime.now(),

firstDate: DateTime(1950),

//DateTime.now() - not to allow to choose before today.

lastDate: DateTime(2100));

if (pickedDate != null) {

print(

pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000

String formattedDate =

DateFormat('yyyy-MM-dd').format(pickedDate);

print(

formattedDate); //formatted date output using intl package => 2021-03-16

setState(() {

dateInput.text =

formattedDate; //set output date to TextField value.

});

} else {}

))));

}

Thanks for reading this article ❤

I hope this blog will help you to learn about the DatePicker in Flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.

Happy Learning ✍️

Flutter DateTimePicker UItextfield and Date picker

Deepak Kumar 12 April 2023

. . .

Date Picker In Flutter

Date Picker in Flutter

Lets Start implementation

Add package

Code to pick date

Complete Code for Date Picker In Flutter

Leave a comment

4 Comments

Date Picker In Flutter

Date Picker in Flutter

Lets Start implementation

Add package

Code to pick date

Complete Code for Date Picker In Flutter

Leave a comment

4 Comments

Message Sent!