How to display the date in custom format in Flutter

Question

I want to pick the date and print it in the custom format( DD-MM-YYYY). Am able to do that using the following code. However when I pick the date from date picker still the current date is displaying not the picked date. There is a problem in my setState it seems. But am unable to trace it.

import 'package:checkboxtest/report.dart';
import 'package:flutter/material.dart';


class Date extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: TextTheme(body1: TextStyle(fontSize: 21))),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  DateTime _date = DateTime.now();
  static var date1 = DateTime.now();
  var customDate = "${date1.day}-${date1.month}-${date1.year}";
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_date == null
                ? 'Today'
                : "${date1.day.toString().padLeft(2, '0')}-${date1.month.toString().padLeft(2, '0')}-${date1.year.toString()}"),
            RaisedButton.icon(
              color: Colors.teal,
              icon: Icon(Icons.calendar_today),
              label: Text('Pick Date'),

              onPressed: () {
                
                showDatePicker(
                        context: context,
                        initialDate: _date == null ? DateTime.now() : _date,
                        firstDate: DateTime(2001),
                        lastDate: DateTime(2021))
                    .then((date) {
                  setState(() {
                    
                   customDate =
                   "${date.day.toString().padLeft(2, '0')}-${date.month.toString().padLeft(2, '0')}-${date.year.toString()}";
                  });
                });
              },
            ),
           ],
        ),
      ),
    );
  }
}

read carefully [DateFormat](https://api.flutter.dev/flutter/intl/DateFormat-class.html) official documentation — pskink, Dec 22 '19 at 07:55
Does this answer your question? [How do I format a date with Dart?](https://stackoverflow.com/questions/16126579/how-do-i-format-a-date-with-dart) — Hussnain Haidar, Dec 22 '19 at 08:06
Am able to parse the date as per my required format..My issue is with the setState..Unable to display picked date from date picker.. — raj, Dec 22 '19 at 10:28

rishabh mistry · Answer 1 · 2019-12-22T15:00:11.043

2

to format date, you can use dateFormatter first, make your date formater object

DateFormat dateFormat = DateFormat("yyyy-MM-dd HH:mm:ss");

this is example of date format date is displayed according to this format you can use any format here

yyyy-MM-dd HH:mm:ss

check formats from this link https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html

after that, you need to parse the date, which you want to format, to get a date in string

String string = dateFormat.format(DateTime.now());

use parse to get the date in String Object

DateTime dateTime = dateFormat.parse("2019-07-19 8:40:23");

edited Dec 22 '19 at 15:00

answered Dec 22 '19 at 14:42

rishabh mistry

527
3
8

Please specify importing built-in intl package `import 'package:intl/intl.dart';` in order to use the `DateFormat` class. – U.Savas Dec 20 '20 at 09:59

score 0 · Answer 2 · answered Jun 09 '21 at 15:56

Simple and easy way to add format to your date is by passing your custom date format in the DateFormat() method

DateFormat('dd/MMM/yy').format(DateTime.now())

returns date in this format09/jun/21

or you can pass dd-MM-yyyy date format to the DateFormat() method and it will return 09-06-2021

How to display the date in custom format in Flutter

2 Answers2