4 Ways to Format DateTime in Flutter

This article walks you through a couple of different ways to format DateTime in Flutter (and Dart). The first approach is to create a format function from scratch, and the later ones are using third-party packages.

Using self-written code

In the vast majority of cases, we can get the thing we need with a few lines of code. In the example below, we create a reusable function named simplyFormat which can return a result in either yyyy-MM-dd HH:mm:ss pattern ((both date and time) or yyyy-MM-dd pattern (date-only).

The code with explanations:

// Define a simple format function from scratch
String simplyFormat({required DateTime time, bool dateOnly = false}) {
  String year = time.year.toString();

  // Add "0" on the left if month is from 1 to 9
  String month = time.month.toString().padLeft(2, '0');

  // Add "0" on the left if day is from 1 to 9
  String day = time.day.toString().padLeft(2, '0');

  // Add "0" on the left if hour is from 1 to 9
  String hour = time.hour.toString().padLeft(2, '0');

  // Add "0" on the left if minute is from 1 to 9
  String minute = time.minute.toString().padLeft(2, '0');

  // Add "0" on the left if second is from 1 to 9
  String second = time.second.toString();

  // If you only want year, month, and date
  if (dateOnly == false) {
    return "$year-$month-$day $hour:$minute:$second";
  }

  // return the "yyyy-MM-dd HH:mm:ss" format
  return "$year-$month-$day";
}

// Test our function
void main() {
  DateTime currentTime = DateTime.now();

  // Full date and time
  final result1 = simplyFormat(time: currentTime);
  print(result1);

  // Date only
  final result2 = simplyFormat(time: currentTime, dateOnly: true);
  print(result2);

  // Kindacode.com
}

The output should be in this form:

2023-01-08 06:10:13
2023-01-08

You can save the simplyFormat function to reuse in other projects. Its biggest advantage is that you can easily customize each line of code and are not dependent on external libraries.

Using date_format package

date_format is a lightweight package whose single purpose is to provide a simple API for formatting dates.

Installation

Run the command below to add the package name to your pubspec.yaml file::

flutter pub add date_format

Then execute this:

flutter pub get

Example

The code:

import 'package:date_format/date_format.dart';

void main() {
  DateTime currentTime = DateTime.now();

  String result1 = formatDate(currentTime, [yyyy, '/', mm, '/', dd]);
  print(result1);

  String result2 = formatDate(currentTime, [
    yyyy,
    '-',
    mm,
    '-',
    dd,
    ' ',
    HH,
    ':',
    mm,
  ]);
  print(result2);
}

Output:

2023/01/28
2023-01-28 21:01

Using intl package

intl is a big package that provides lots of facilities, including format DateTime. At the time of writing, It is one of the most-liked packages on pub.dev.

Installation

Install the latest version of the package by running:

flutter pub add intl

Then execute this command:

flutter pub get

Example:

import 'package:intl/intl.dart';
void main() {
  DateTime currentTime = DateTime.now();

  // the "dd/MM/yyyy HH:mm" format
  print(DateFormat.yMd().add_jm().format(currentTime));

  // just the date
  print(DateFormat.yMd().format(currentTime));
}

Output:

1/8/2023 6:14 AM
1/8/2023

You can find more advanced options on the package API reference page.

Using jiffy package

jiffy is another great plugin for our purpose. It provides tools for parsing, manipulating, querying, and formatting dates.

Installation

flutter pub add jiffy
flutter pub get

Example:

import 'package:jiffy/jiffy.dart';
void main() {
  DateTime currentTime = DateTime.now();

  String result1 = Jiffy(currentTime).format('yyyy-MMMM-do, h:mm:ss a');
  print(result1);

  String result2 = Jiffy(currentTime).format('MMM do yy');
  print(result2);
}

Output:

2023-January-28o, 9:34:25 PM
Jan 28th 23

Conclusion

We’ve seen several options to format dates in Flutter. All of them are nice and elegant. Which one will you choose to use in your project? Flutter is charming, and there are many things to learn. Continue exploring more by taking a look at the following articles:

• Ways to convert DateTime to time ago in Flutter
• Dart: Convert Timestamp to DateTime and vice versa
• Flutter: Making Beautiful Chat Bubbles (2 Approaches)
• Flutter: Making a Dropdown Multiselect with Checkboxes
• Flutter: AbsorbPointer example
• Using GetX (Get) for Navigation and Routing in Flutter

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.