How to Format DateTime in Flutter?

Trying to format DateTime in Flutter, but got no leads so far? We’ve got two simple ways ready for you!

Dates help users identify the current world’s time, whether an event has occurred on time or if it will happen in the future. They’re widely used in multiple aspects of development and are generally pretty easy to work with. 

However, the story changes when it comes to formatting DateTime. Add Flutter development into the mix, and it’s an entirely different beast to tame. 🤔

Luckily, there are 2 major ways of tackling this problem, and this guide will focus on showcasing their workings!

The default generated value might be a bit too much — we get it. You want the application to look exactly as intended, and that’s how it should be. Therefore, learning the ways of Flutter is a must if you want to attain that level of production. 

How to Format DateTime in Flutter?

Having said that, formatting DateTime is one of those many steps in your path, and it can be solved by implementing one of the following approaches:

1. Utilizing Custom Patterns
2. Utilizing Standard Formats

Either way, you won’t have to go through the documentation, and other jargon to understand what’s happening. So, with that said, let’s jump right in!

Method 1: Custom Patterns

This method is perfect if you want to specify custom styling for your displayed Date. Flutter is a versatile framework, but it cannot have everything pre-packaged! 🧐

1. Adding the intl Package

The intl package provides you with internalization and localization facilities. In order words, it contains features like date/number formatting, message translations, and so on. 

For the sake of this article, we will be using the date formatting feature to morph out DateTime into whatever we need. With that said, here’s how the code will look like: 🤔

dependencies:

  flutter:

    sdk: flutter

  cupertino_icons: ^1.0.2  # Adds Cupertino Font to your application; change it according to your needs. 

  intl: ^0.17.0 

2. Formatting DateTime

Once the package has been called, it’s time to fetch the DateTime in order to work with it. You can either use your project’s format or the following code:

DateTime current_datetime = DateTime.now(); # Copies the DateTime of that instance to the current_datetime variable

String formatted_datetime = DateFormat('EEEE, MMM d, yyyy').format(current_datetime);

# Formats the current DateTime to your specified format of days of the week, then months, days, and finally, years

Here’s the format of the output:

Thursday, November 3, 2022

3. Custom Format Commands

Here’s a list of multiple format-related commands along with their outputs of the following DateTime:

Input DateTime = 2022-11-03 01:20:03.1231

DateFormat(‘EEEE, MMM d, yyyy’).format(DateTime.now())

DateFormat(‘MM/dd/yyyy’).format(DateTime.now())

DateFormat(‘MM-dd-yyyy HH:mm’).format(DateTime.now())

DateFormat(‘MM d, h:mm a’).format(DateTime.now())

DateFormat(‘MMMM yyyy’).format(DateTime.now())

DateFormat(‘MMM d, yyyy’).format(DateTime.now())

DateFormat(‘E, d MMM yyyy HH:mm:ss’).format(DateTime.now())

DateFormat(‘yyyy-MM-ddTHH:mm:ss’).format(DateTime.now())

DateFormat(‘dd.MM.yy’).format(DateTime.now())

DateFormat(‘HH:mm:ss.SSS’).format(DateTime.now())

Method 2: Using Standard Formats

This method uses the built-in Dart formats to output a readable DateTime. The general idea is the same as the previous one. 

For the sake of simplicity, step #1 will be identical to the previous method’s step #1. 

1. Formatting DateTime

Once you’ve called the necessary libraries, it’s time to use one of the many flutter commands to call specific DateTime formats. 😎

Here’s how the code works:

DateTime current_DateTime = DateTime.now();

String formatted = DateFormat.yMMMEd().format(current_DateTime);

print(formatted);

Here’s what your output should look like:

Thu, Nov 3, 2022

Only the format needs to align; the values will be according to that specific instance’s DateTime.

2. Standard Format Commands

Here’s a list of multiple format-related commands along with their outputs of the following DateTime:

Input DateTime = 2022-11-03 01:20:03.1231

DateFormat.d().format(DateTime.now()) 

DateFormat.E().format(DateTime.now()) 

DateFormat.EEEE().format(DateTime.now()) 

DateFormat.LLL().format(DateTime.now()) 

DateFormat.LLLL().format(DateTime.now()) 

DateFormat.M().format(DateTime.now()) 

DateFormat.Md().format(DateTime.now()) 

DateFormat.MEd().format(DateTime.now()) 

DateFormat.MMM().format(DateTime.now()) 

DateFormat.MMMd().format(DateTime.now()) 

DateFormat.MMMEd().format(DateTime.now()) 

DateFormat.MMMM().format(DateTime.now()) 

DateFormat.MMMMd().format(DateTime.now()) 

DateFormat.MMMMEEEEd().format(DateTime.now()) 

DateFormat.QQQ().format(DateTime.now(1) 

DateFormat.QQQQ().format(DateTime.now()) 

DateFormat.y().format(DateTime.now()) 

DateFormat.yM().format(DateTime.now()) 

DateFormat.yMd().format(DateTime.now()) 

DateFormat.yMEd().format(DateTime.now()) 

DateFormat.yMMM().format(DateTime.now()) 

DateFormat.yMMMd().format(DateTime.now()) 

DateFormat.yMMMEd().format(DateTime.now()) 

DateFormat.yMMMM().format(DateTime.now()) 

DateFormat.yMMMMd().format(DateTime.now() 

DateFormat.yMMMMEEEEd().format(DateTime.now()) 

DateFormat.yQQQ().format(DateTime.now()) 

DateFormat.yQQQQ().format(DateTime.now()) 

DateFormat.H().format(DateTime.now()) 

DateFormat.Hm().format(DateTime.now()) 

DateFormat.Hms().format(DateTime.now()) 

DateFormat.j().format(DateTime.now()) 

DateFormat.jm().format(DateTime.now()) 

DateFormat.jms().format(DateTime.now())

Conclusion

In essence, the intl package is the one responsible for providing the functions needed to format DateTime according to your choice. There are a plethora of built-in formats pertaining to your needs. 🤓

However, you always have the option to create your own format if needed. Having said that, you generally don’t need to go that far since the preset library is vast. 

Be sure to use the mentioned commands to make your life easier. The document can be a pain to navigate through, so we’ve compiled most of it here!

In case you’re having difficulty deciding your ideal DateTime style, it might be a good idea to test all the formats until you find the one you’re looking for. 🧐

Lastly, let us know in the comments:

1. Were you able to format DateTime in Flutter?
2. Have you found a simpler library that can do all this and more with less effort?
3. What kind of project are you intending to create using Flutter?
4. Are there any other points or useful information you believe we should’ve mentioned?

Feel free to share this article amongst your friends and peers so that they can code faster and simpler!