#intl:intl example
Format some DateTime objects to good looking strings.
Uses the same format as used in stackoverflow (and many other popular websites). For example, a DateTime object that was 10 seconds ago will be formatted as 10 seconds ago.
Main library: intl:intl
Main elements: DateFormat DateFormat.format DateTime
Gist: https://gist.github.com/kasperpeulen/99a0e72c084b09b969f4
Tags: #date
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- material design lite--> | |
| <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> | |
| <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.purple-orange.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="wrapper mdl-shadow--2dp"></div> | |
| <script type="application/dart" src="main.dart"></script> | |
| </body> | |
| </html> |
| import 'package:intl/intl.dart' as intl; | |
| import 'dart:async'; | |
| import 'dart:html'; | |
| DateTime now = new DateTime.now(); | |
| DateTime minusMinute = now.subtract(new Duration(minutes:1)); | |
| DateTime minusHour = now.subtract(new Duration(hours:1)); | |
| DateTime minusDay = now.subtract(new Duration(hours:24)); | |
| DateTime minusWeek = now.subtract(new Duration(days:7)); | |
| DateTime minusYear = now.subtract(new Duration(days:365)); | |
| DivElement output = querySelector('div'); | |
| main() { | |
| new Timer.periodic(new Duration(seconds:1), (_) => | |
| output.setInnerHtml(template, validator: new TrustedNodeValidator()) | |
| ); | |
| } | |
| String get template => | |
| ''' | |
| ${formatDate(now)}<br> | |
| ${formatDate(minusMinute)}<br> | |
| ${formatDate(minusHour)}<br> | |
| ${formatDate(minusDay)}<br> | |
| ${formatDate(minusWeek)}<br> | |
| ${formatDate(minusYear)}<br> | |
| '''; | |
| String formatDate(DateTime date) { | |
| Duration difference = new DateTime.now().difference(date); | |
| int days = difference.inDays; | |
| int hours = difference.inHours; | |
| int minutes = difference.inMinutes; | |
| int seconds = difference.inSeconds; | |
| if (days < 7 && hours >= 24) { | |
| return '$days day ago'; | |
| } | |
| if (hours < 24 && minutes >= 60) { | |
| return '$hours hours ago'; | |
| } | |
| if (minutes < 60 && seconds >= 60) { | |
| return '$minutes minutes ago'; | |
| } | |
| if (seconds < 60) { | |
| return '$seconds seconds ago'; | |
| } | |
| return new intl.DateFormat("MMM d ''yy 'at' HH:mm").format(date); | |
| } | |
| /// A [NodeValidator] which allows everything. | |
| class TrustedNodeValidator implements NodeValidator { | |
| bool allowsElement(Element element) => true; | |
| bool allowsAttribute(element, attributeName, value) => true; | |
| } |
| name: intl:intl_DateFormat_DateFormat.format_DateTime_'date' | |
| description: | | |
| Format some `DateTime` objects to good looking strings. | |
| Uses the same format as used in stackoverflow (and many other popular websites). For example, a DateTime object that was 10 seconds ago will be formatted as `10 seconds ago`. | |
| homepage: https://gist.github.com/kasperpeulen/99a0e72c084b09b969f4 | |
| homepage: https://gist.github.com/kasperpeulen/99a0e72c084b09b969f4 | |
| environment: | |
| sdk: '>=1.0.0 <2.0.0' | |
| dependencies: | |
| intl: '>=0.12.4 <0.13.0' |
| .wrapper { | |
| margin: 20px auto; | |
| max-width: 500px; | |
| padding: 20px; | |
| } |