Klipfolio. The KPI Dashboard - Evolved
The KPI Dashboard – Evolved
1-877-233-6149
Contact Us

Formatting dates

Problem:

You want to format the dates that are displayed in the Klip and/or tooltip.

Solution:

You can specify how to display the dates from your data source in your Klip by using type: date and (a combination of) the following format values:

  • "in(<date format>)" - specifies the date format to look for in the data source
  • "nolocaltime" - date is not adjusted based on the user's time zone
  • "note(<date format>)" - specifies the format for the date display in the tooltip
  • "out(<date format>)" - specifies the format for the date display in the Klip

Note that Klipfolio Dashboard expects the dates in the data source to be in either the RFC 822 or ISO 8601 format.

For example, by using the following style settings, the Klip will display the dates as shown in the screenshot below.

<style>
    item {
        type: item;
        definition: all;
    }
    calendar {
        type: date;
        itemcol: 1;
        noterow: 1;
        format: "out(MM/DD/YY),note(MMM DD, YYYY, h:mm tt)";
        name: "column 1";
        align: right;
    }
    calendar {
        type: date;
        itemcol: 2;
        format: "out(HH:mm, MMMM DD, YYYY)";
        name: "column 2";
        align: right;
    }
</style>

http://www.klipfolio.com/images/content/cookbook/date.pngIs the displayed date being adjusted for your time zone?
When the data source does not include any information about its time zone, Klipfolio Dashboard automatically adjusts the given dates to the time zone of the user who is running the Klip. To prevent this, use the nolocaltime value. For example:

format: "out(MMMM DD, YYYY),nolocaltime";

In Klipfolio Dashboard 6 and later, the "Select date range" menu option is automatically added to Klips with one or more type: date columns. For details, refer to the how-to article, Customizing the "Select date range" Klip menu.

Leave a Comment

To leave a comment, you must sign in or register (it's free).

   
Comment Type:
Title:
Comment: