Elapsed Time Web Component

Compares a DateTime to the current time and displays the elapsed time, such as

4 hours 38 minutes

Demonstration code can be exercised by running example/app.html in Dartium. This references a demo web component, which in turn references the 'elapsed-time' element.

Internationalization for some locales (de, en, es, fr, it, pt) is supported by setting the selectedLocale attribute. The example app how to set the locale using the user's browser language setting (not always an ideal strategy).

Usage

  • This is the simplest case. DateTime.now() is the default time, and no attributes are set.
    <elapsed-time></elapsed-time> 
  • Units like 'minutes' and 'hours' can be abbreviated for a more succinct presentation. Set "verbose" to "false".
    <elapsed-time verbose="false"></elapsed-time> 
  • A prefix and/or suffix can be specified (for example, " ago").
    <elapsed-time prefix="happened" suffix=" ago"></elapsed-time> 
  • A message can be specified when the elapse is less than one minute (for example, as "moments ago").
    <elapsed-time lessThanOneMinute="moments ago"></elapsed-time> 
  • A specific date can be specified (for example, two hours ago).
    <elapsed-time dateTime="{{twoHoursAgo}}"></elapsed-time> 
  • A future specific date can be specified (for example, two hours from now).
    <elapsed-time dateTime="{{twoHoursAhead}}"></elapsed-time> 
  • The CSS style of the elapsed time can be explicitly set (for example, "color: red;").
    <elapsed-time elapsedTimeStyle="color: red;"></elapsed-time> 
  • CSS style can be dynamically configured via a callback (for example, bold red for 2 hours or more, otherwise green italic).
    <elapsed-time styleCallback="{{colorTime}}"></elapsed-time> 

Dart code:

@published StyleCallbackFunction colorTime = (DateTime dateTime, Duration duration) => duration.inMinutes >= 2 ? "color: red; font-weight: bold" : "color: green; font-style: italic";  
  • The tooltip icon can be altered to another core-icons option (for example, to "warning").
    <elapsed-time tooltipIcon="warning"></elapsed-time> 
  • If the date is null a custom message can be displayed (the default shows nothing).
    <elapsed-time noTimeSpecified="not available" ></elapsed-time> 
  • Seconds can be displayed and refreshed at at specific frequency.
    <elapsed-time dateTime="{{twoHoursAhead}}" selectedLocale="es" refreshInSeconds="5" includeSeconds="true" verbose="false" ></elapsed-time> 

Libraries

all_messages
de_messages

DO NOT EDIT. This is code generated via pkg/intl/generate_localized.dart This is a library that provides messages for a messages locale. All the messages from the main program should be duplicated here with the same function name.

elapsed_time
es_messages

DO NOT EDIT. This is code generated via pkg/intl/generate_localized.dart This is a library that provides messages for a messages locale. All the messages from the main program should be duplicated here with the same function name.

fr_messages

DO NOT EDIT. This is code generated via pkg/intl/generate_localized.dart This is a library that provides messages for a messages locale. All the messages from the main program should be duplicated here with the same function name.

it_messages

DO NOT EDIT. This is code generated via pkg/intl/generate_localized.dart This is a library that provides messages for a messages locale. All the messages from the main program should be duplicated here with the same function name.

messages_all

This was manually constructed from the individual generated local files

pt_messages

DO NOT EDIT. This is code generated via pkg/intl/generate_localized.dart This is a library that provides messages for a messages locale. All the messages from the main program should be duplicated here with the same function name.

util