Configuring Date Formats

FusionWidgets XT Gantt chart allows you to configure both the input and output date format. This allows you to provide the date and show them on the chart using your own custom format.
Setting Input Date Format

You've already seen how to set the input date format by setting:

<chart dateFormat='mm/dd/yyyy' ... >
{"chart":{"dateformat":"mm/dd/yyyy"... } }

The dateFormat attribute can take any one of these values and all your dates specified in the XML should conform to that format.

  • mm/dd/yyyy
  • dd/mm/yyyy
  • yyyy/mm/dd
 
Configuring output date format

FusionWidgets XT Gantt chart also allows you to customize the format for dates which are outputted (shown) on the chart. This format can be different from your input format and can accept a lot more types. By default, if you do not specify an explicit output date format, it assumes the same format as input date format.

To set output date format, you use:

<chart dateFormat='mm/dd/yyyy' outputDateFormat='mns ddds, yyyy' ...>
{"chart":{"dateformat":"mm/dd/yyyy", "outputdateformat":"mns ddds, yyyy" ... } }

Here, mns ddds, yyyy is the custom date format template which is applied to output dates. We'll see how to build this template soon. However, when you run this chart, you'll see the dates as under:

As you can see, our input dates have been converted into a more readable format by applying output date format. This is possible using the output date format template.

This template can consist of various pre-defined tokens. You can add those tokens to form up a date format.

Currently supported tokens for building output date format template are:

Token What it represents?
dd Numeric Date
mm Numeric Month
yy Numeric year (2 digits only)
yyyy Numeric year (4 digits)
hh Hour in 24 hour format - Numeric
hh12 Hour in 12 hour format - Numeric
mn Minute
ss Second
ampm When using 12 hour format, this specifies whether it's AM or PM
mnl Month Name Long (Full)
mns Month Name Short
dnl Week Day Name (Long)
dns Week Day Name (short)
ds Suffix for the date (like st, nd, rd, th etc.)
 
Let's quickly see some sample template examples to get a clearer idea of how to build custom output formats:
 
Output date format that you need What date format to use?
21st March, 2007 ddds mnl, yyyy
March 21 2007 mnl dd yyyy
21-Mar-07 mns-dd-yy
3/7/2007 mm/dd/yyyy
21-03 dd-mm
Friday, 21st March 07 dnl, ddds mnl yy
21-7-2007 13:11:20 dd-mm-yyyy hh:mn:ss
21-7-2007 1:11:20 PM dd-mm-yyyy hh12:mn:ss ampm
1:11:20 PM hh12:mn:ss ampm
 
Please note that the output format is not restricted to the examples listed above. Using the tokens, you can build your own custom date format templates.