The Formatter field is really only for date formatting, which is good since that is what you are looking for.
The options for formatting the dates include the following list. Scroll to the bottom to get the full definition and regex treatment applied:
- mmss
- mss
- hmm
- hm
- ms
- ampm
- ap
- yyyy
- yy
- mm
- m
- dd
- d
- hh
- h
- ss
- s
Background Information
How is Formatter Handled?
The Formatter
field coming out of the ColumnField
item type is used in the ListControl
class as a Backbone data-bind
attribute. You can see it in action below. The key to note is the formatValue(DataField,formatter)
that is being used.
public virtual string RenderRow()
{
Item dataSource = this.GetDataSource();
if (dataSource == null)
return string.Empty;
StringWriter stringWriter = new StringWriter();
HtmlTextWriter output = new HtmlTextWriter((TextWriter) stringWriter);
foreach (Item child in dataSource.Children)
{
string str1 = string.IsNullOrEmpty(child["ContentAlignment"]) ? string.Empty : " sc-text-align-" + ClientHost.Items.GetItem(child["ContentAlignment"]).Name.ToLower();
output.AddAttribute(HtmlTextWriterAttribute.Class, "ventilate" + str1);
output.AddAttribute("data-sc-important", "data-sc-important");
string str2;
if (string.IsNullOrEmpty(child["Formatter"]) && string.IsNullOrEmpty(child["HTMLTemplate"]))
{
string str3 = "typeof $data['" + child["DataField"] + "'] != 'undefined' ? $data['" + child["DataField"] + "'] : ''";
str2 = string.Format("{0},{1}", (object) ("text: " + str3), (object) ("attr: { title: " + str3 + " }"));
}
else if (string.IsNullOrEmpty(child["DataField"]) && !string.IsNullOrEmpty(child["HTMLTemplate"]))
str2 = "html: formatValue('', '" + child["HTMLTemplate"] + "')";
else
str2 = string.Format("{0},{1}", (object) ("text: formatValue('" + child["DataField"] + "', '" + child["Formatter"] + "')"), (object) ("attr: { title: formatValue('" + child["DataField"] + "', '" + child["Formatter"] + "')}"));
ListControl.SetWidthStyle(output, child);
output.AddAttribute("data-bind", str2);
output.RenderBeginTag(HtmlTextWriterTag.Td);
output.RenderEndTag();
}
return stringWriter.ToString();
}
formatValue(object,format)
This is a Sitecore ListControl.js
Javascript method that is getting passed through the data-bind
attribute listed above and executed on the client side when the List is created and displayed. It appears that formatValue()
really is only meant to handle date formatting. However, as you look at formatValue() method below, you'll note that the dateConverter.toStringWithFormat()
is getting called out of the Sitecore minified Backbone javascript.
// apply formating
itemModel.viewModel.formatValue = function (name, format) {
var val = "";
// Checking for this[name]() invokes binding, so make sure this[name] is a function
if (typeof this[name] === 'function' && name != "" && typeof this[name]() != 'undefined') {
val = this[name]();
}
var tempValue = '';
var additionalValues;
if (this.$formattedFields) {
additionalValues = this.$formattedFields();
}
if (format && format == "short") {
if (additionalValues && additionalValues[name]) {
tempValue = additionalValues[name].shortDateValue;
if (tempValue) val = tempValue;
}
}
else if (format && format == "long") {
if (additionalValues && additionalValues[name]) {
tempValue = additionalValues[name].longDateValue;
if (tempValue) val = tempValue;
}
}
else if (format) {
var isHtmlTemplate = val == "" && name == "";
if (isHtmlTemplate) {
var viewModel = this;
var getValue = function (fieldname) {
if (typeof viewModel[fieldname] != "undefined") {
return viewModel[fieldname]();
}
return undefined;
};
tempValue = sc.Helpers.string.formatByTemplate(format, getValue);
} else if (sc.Helpers.date.isISO(val)) {
var dateConverter = sc.Converters.get("date");
tempValue = dateConverter.toStringWithFormat(val, format);
}
if (tempValue) val = tempValue;
}
return val;
};
this.collection.add(itemModel);
}, this);
What can I pass into the Formatter Field?
By looking at the toStringWithFormat
method, you can pretty easily tell what date formatting options you have.
toStringWithFormat: function (value, format) {
if (Utils.date.isISO(value)) {
try {
var date = Utils.date.parseISO(value);
var formats = {
mmss: {
expression: "(\\W|^)mm(\\W+s{1,2}\\W|\\W+s{1,2}$)",
value: Utils.date.ensureTwoDigits(date.getUTCMinutes())
},
mss: {
expression: "(\\W|^)m(\\W+s{1,2}\\W|\\W+s{1,2}$)",
value: date.getUTCMinutes().toString(),
},
hmm: {
expression: "(\\Wh{1,2}\\W+|^h{1,2}\\W+)mm(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCMinutes()),
},
hm: {
expression: "(\\Wh{1,2}\\W+|^h{1,2}\\W+)m(\\W|$)",
value: date.getUTCMinutes().toString(),
},
ms: {
expression: "(\\Wss\\W|^ss\\W)00(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCMilliseconds()),
},
ampm: {
expression: "(\\W|^)AM/PM(\\W|$)",
value: ((date.getUTCHours() >= 12) ? "PM" : "AM"),
},
ap: {
expression: "(\\W|^)A/P(\\W|$)",
value: ((date.getUTCHours() >= 12) ? "P" : "A"),
},
yyyy: {
expression: "(\\W|^)yyyy(\\W|$)",
value: date.getUTCFullYear().toString(),
},
yy: {
expression: "(\\W|^)yy(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCFullYear() % 100),
},
mm: {
expression: "(\\W|^)mm(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCMonth() + 1),
},
m: {
expression: "(\\W|^)m(\\W|$)",
value: (date.getUTCMonth()+1).toString(),
},
dd: {
expression: "(\\W|^)dd(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCDate()),
},
d: {
expression: "(\\W|^)d(\\W|$)",
value: date.getUTCDate().toString(),
},
hh: {
expression: "(\\W|^)hh(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCHours()),
},
h: {
expression: "(\\W|^)h(\\W|$)",
value: (date.getUTCHours() > 12) ? (date.getUTCHours() - 12).toString() : ((date.getUTCHours() == 0) ? 12 : date.getUTCHours()).toString(),
},
ss: {
expression: "(\\W|^)ss(\\W|$)",
value: Utils.date.ensureTwoDigits(date.getUTCSeconds()),
},
s: {
expression: "(\\W|^)s(\\W|$)",
value: date.getUTCSeconds().toString()
}
};