Formatting Date & Time



Please also review Working with Date & Time for more.


Definitive Guide to formatting Date & Time

EachScape uses standard EPOCH formatting controls.

Please refer to the definitive guide to Date & Time Format Patterns which can be found here.


If the time is properly formatted, you can just display it.


However, more often than not, designs will dictate that time be displayed in a variety of ways on different screens of the app and often there is only one feed that drives all or many of these dates.

If you can add the correctly formatted date format directly to your feed, that clearly is the simplest solution but you also can use the following techniques to alter the format of the dates that are delivered in the feed.


In order for you to format dates, the Studio needs to be able to understand what time it currently is.  Time can be expressed in so many different ways in a feed with abbreviations and months coming before days, time zone information, commas and other extraneous info. The builder uses what is called Unix Time (def. is a system for describing instances in time, defined as the number of seconds that have elapsed since midnight Coordinated Universal Time (UTC), 1 January 1970, not counting leap seconds.). Here is an example of a Unix Time stamp: 1357187045.


If your feed already delivers your time in Unix Time then you can go straight to using the fomatDate formatter:

example: 
[[ds:/DVCE comments/comments/timestamp:formatDate M/d/yyyy]]



If you want time to be expressed in a format like, how long ago it was posted, then you need to use the formatIntervalSinceDate formatter. However please note that you need to tell this formatter the precise date format it currently is within the feed. So after the :formatIntervalSinceDate formatter add a space and then describe the existing feed using the Date Format patterns found here


This is the original feed value:

[[ds:/FN Twitter/Twitter-entry/publish_date]] = 2012-03-14T13:05:02Z


Here is an example:


[[ds:/FN Twitter/Twitter-entry/publish_date:formatIntervalSinceDate yyyy-MM-dd'T'HH::mm::ss'Z']] ago
 
You can also use the Formatter: 'Format Interval Since Date' and 'Format Interval Until Date'




Because the T and Z characters need to be ignored you put a single quote around them and they will be ignored by the parser. Also note that when you are using the Date Format patterns, when the data has a colon in it, you need to add an extra colon in front of them  so that they will be interpreted as colons (ex.   HH::mm::ss   ). Lastly the formatter doesn't say anything beyond a number and units (minutes, hours, months) so you need to manually add "ago" after it.



If your feed is delivering Unix Time and you want to use the formatIntervalSinceDate formatter you need to first format the date because it does not expect Unix Time. So you must first use the formatDate formatter and then pipe it through to the next interval formatter.


ex.

[[ds:/DVCE articles/item/timestamp:formatDate yyyyMMddkkmmss|formatIntervalSinceDate yyyyMMddkkmmss]] ago


This is also the exact same way to convert dates from one format to another. But first you use the parseDate format to convert your date into Unix Time, and then you chain it through to the formatDate formatter using the pipe character (ex.   |   ).


ex.

[[ds:/Soup Videos/item/pub_date:parseDate EEE, dd MMM yyyy HH::mm::ss z|formatDate EEE., MMM. d, yyyy h::mm a zzz]]



Please refer to the definitive guide to Date Format Patterns.




Notes 

You can figure out what the date is from out of your feed using the Inspector by following these steps:

  1. Make sure your computer and mobile device are on the SAME network.
  2. Run the mobile app.
  3. On the computer in a web browser enter in the IP address of the mobile device.


Click on the Template Expander and paste in the template you want to expand in the Template field. So if you paste in:

[[ds:/FN Twitter/Twitter-entry/publish_date]]

you might get this value returned: 2012-03-14T13:05:02Z



In the Template Expander you can take that value and use it to troubleshoot the correct date format by converting [[ds:/FN Twitter/Twitter-entry/publish_date]] to [[text:2012-10-05:2013-01-08T13:05:02Z]] then you can start putting on formatters and previewing how they affect and change your dates. It’s best to done one at a time and keep refining your date until you get it exactly as you need it.



If you want time to be expressed in a format like, how long ago it was posted, then you need to use the formatIntervalSinceDate formatter. However please note that you need to tell this formatter the precise date format it currently is in within the feed. So after the feed, add the :formatIntervalSinceDate formatter then a space and then describe the existing feed using the Date Format patterns found here: http://unicode.org/reports/tr35/tr35-6.html#Date_Format_Patterns



Here is an example:

[[ds:/FN Twitter/Twitter-entry/publish_date:formatIntervalSinceDate yyyy-MM-dd'T'HH::mm::ss'Z']]


This is the original feed value:

[[ds:/FN Twitter/Twitter-entry/publish_date]] = 2012-03-14T13:05:02Z



Because the T and Z characters need to be ignored you put a single quote around them and they will be ignored by the parser.



The following formatters are available for general use:

:formatDate will convert an integer into a formatted date. As an example, this template

[[text:1276953001:formatDate M/d/yyyy/'time'/h/mm/a]]

outputs the value “6/19/2010/time/9/10/AM”.


:parseDate converts a string to an integer representing time in the Unix epoch An argument provides a definition of the date format being parsed. Note that this is closely related to formatDate above. For example,

[[text:2012-10-05:parseDate yyyy-MM-dd|formatDate M/d/yy]]

will convert “2012-10-05” to “5/10/12”.



:formatIntervalSinceDate expresses time in a format like, how long ago something is from the current time. You need to tell this formatter the precise date format it currently is within the feed and it automatically tells you how much time has transpired since that time to now.  For example,

 

[[text:2012-10-05:2013-01-08T13:05:02Z:formatIntervalSinceDate yyyy-MM-dd'T'HH::mm::ss'Z']]

ago  will convert to something like, “2 days ago”.


Learn More

- Working with Date & Time

Time Calculations