Best Practices for Date and Time Formatting in Flutter using intl Package
Flutter Date and Time formatting using intl package
Introduction📣
DateTime manipulation and formatting are essential skills for any mobile app developer, especially when working with date and time-related data. Flutter, a popular cross-platform framework, provides powerful tools for handling DateTime objects and formatting them to meet your app's needs. In this blog post, we will explore the various aspects of DateTime formatting in Flutter and learn how to display dates and times in a user-friendly manner.
Installation ⚙️
dependencies:
intl: <latest_version>
Notation 🪧
y
: The year, as a 4-digit integer.M
: The month, as a 2-digit integer.d
: The day of the month, as a 2-digit integer.H
: The hour of the day, in 24-hour format.m
: The minute of the hour, as a 2-digit integer.s
: The second of the minute, as a 2-digit integer.a
: The AM/PM indicator, is a 2-digit integer.
Example 💡
Date & Time📆⏰
Pattern | Result |
DateFormat('EEEE, MMM d, yyyy').format(DateTime.now()) | Wednesday, Oct 18, 2023 |
DateFormat('EE, MMM d, yyyy').format( DateTime.now ()) | Wed, Oct 18, 2023 |
DateFormat('EE, MMMM d, yyyy').format( DateTime.now ()) | Wed, October 18, 2023 |
DateFormat('EE, MMMM d, yy').format( DateTime.now ()) | Wed, October 18, 23 |
DateFormat('MM/dd/yyyy').format( DateTime.now ()) | 10/18/2023 |
DateFormat('MM-dd-yyyy HH:mm').format( DateTime.now ()) | 10-18-2023 19:48 |
DateFormat('MMM d, h:mm a').format( DateTime.now ()) | Oct 18, 7:48 PM |
DateFormat('MMMM yyyy').format( DateTime.now ()) | October 2023 |
DateFormat('MMM d, yyyy').format( DateTime.now ()) | Oct 18, 2023 |
DateFormat('E, d MMM yyyy HH:mm:ss').format( DateTime.now ()) | Wed, 18 Oct 2023 19:48:45 |
DateFormat('yyyy-MM-ddTHH:mm:ss').format( DateTime.now ()) | 2023-10-18T19:48:47 |
DateFormat(' dd.MM .yy').format( DateTime.now ()) | 18.10.23 |
DateFormat('HH:mm:ss.SSS').format( DateTime.now ()) | 19:48:54.318 |
Date 📆
Pattern | Result |
DateFormat('EE').format( DateTime.now ()) | Wed |
DateFormat('EEEE').format( DateTime.now ()) | Wednesday |
DateFormat('d').format( DateTime.now ()) | 18 |
DateFormat('M').format( DateTime.now ()) | 10 |
DateFormat('MM').format( DateTime.now ()) | 10 |
DateFormat('MMM').format( DateTime.now ()) | Oct |
DateFormat('MMMM').format( DateTime.now ()) | October |
DateFormat('yy').format( DateTime.now ()) | 23 |
DateFormat('yyyy').format( DateTime.now ()) | 2023 |
DateFormat('EE, d/MM').format( DateTime.now ()) | Wed, 18/10 |
DateFormat('EE, MMM yy').format( DateTime.now ()) | Wed, Oct 23 |
DateFormat('Q').format( DateTime.now ()) | 4 |
DateFormat('QQ').format( DateTime.now ()) | 04 |
DateFormat('QQQ').format( DateTime.now ()) | Q4 |
DateFormat('QQQQ').format( DateTime.now ()) | 4th quarter |
DateFormat('EE, d/MM/yyyy').format( DateTime.now ()) | Wed, 18/10/2023 |
DateFormat('EEEE, d/MM/yyyy').format( DateTime.now ()) | Wednesday, 18/10/2023 |
DateFormat('yQQQ').format( DateTime.now ()) | Q4 2023 |
DateFormat('yQQQQ').format( DateTime.now ()) | 4th quarter 2023 |
DateFormat('MM/dd/yyyy').format( DateTime.now ()) | 10/18/2023 |
DateFormat('MM:dd:yyyy').format( DateTime.now ()) | 10:18:2023 |
DateFormat('EE MM yyyy').format( DateTime.now ()) | Wed 10 2023 |
DateFormat('EEEE MM yyyy').format( DateTime.now ()) | Wednesday 10 2023 |
DateFormat('EEEE MMMM yyyy').format( DateTime.now ()) | Wednesday October 2023 |
DateFormat('EEEE d MMMM yyyy').format( DateTime.now ()) | Wednesday 18, October 2023 |
DateFormat('d MMMM EEEE yyyy').format( DateTime.now ()) | 18 October Wednesday 2023 |
DateFormat('MMM E d').format( DateTime.now ()) | Oct Wed 18 |
Time ⏰
Pattern | Result |
DateFormat('h:mm a').format( DateTime.now ()) | 10:28 PM |
DateFormat('HH:mm:ss').format( DateTime.now ()) | 22:28:56 |
DateFormat('HH:mm:ss.SSS').format( DateTime.now ()) | 22:29:00.057 |
Demo 🚀
Conclusion🎯
Intl
package is very helpful for formatting Date and Time or any type of pattern.
The above blog and example will help the developer to expand their capabilities with different date and time formatting.
The source code of the full project is given below
GitHub repo with full code here