Date Formatting
The purpose of date formatting is to convert the Date object to a human readable string by using the culture-specific settings.
The kendo.format and kendo.toString methods support standard and custom date formats.
The following runnable example demonstrates how to convert a JavaScript Date object to a string by using the kendo.toString method:
<!-- Add the de-DE culture file -->
<script src="https://kendo.cdn.telerik.com/2022.1.119/js/cultures/kendo.culture.de-DE.min.js"></script>
<h4>Date formats with US culture.</h4>
<div id="content"></div>
<h4>Date formats with DE culture.</h4>
<div id="content2"></div>
<h4>Applying Date formatting to Grid columns.</h4>
<div id="grid"></div>
<script>
// Default culture is en-US.
let format = "<p> Format 'd' = " + kendo.toString(new Date(), "d") + "</p>"
+"<p> Format 'D' = " + kendo.toString(new Date(), "D") + "</p>"
+"<p> Format 'F' = " + kendo.toString(new Date(), "F") + "</p>"
+"<p> Format 'g' = " + kendo.toString(new Date(), "g") + "</p>"
+"<p> Format 'u' = " + kendo.toString(new Date(), "u") + "</p>"
+"<p> Custom format dd/MMMM/yyyy H:mm = " + kendo.toString(new Date(), "dd/MMMM/yyyy H:mm") + "</p><hr>";
$(format).appendTo(content);
// Switch to DE culture.
kendo.culture("de-DE");
let format2 = "<p> Format 'd' = " + kendo.toString(new Date(), "d") + "</p>"
+"<p> Format 'D' = " + kendo.toString(new Date(), "D") + "</p>"
+"<p> Format 'F' = " + kendo.toString(new Date(), "F") + "</p>"
+"<p> Format 'g' = " + kendo.toString(new Date(), "g") + "</p>"
+"<p> Format 'u' = " + kendo.toString(new Date(), "u") + "</p>"
+"<p> Custom format dd/MMMM/yyyy H:mm = " + kendo.toString(new Date(), "dd/MMMM/yyyy H:mm") + "</p><hr>";
$(format2).appendTo(content2);
$("#grid").kendoGrid({
dataSource: [{dateField: new Date(), dateField1: new Date(), dateField2: new Date(), dateField3: new Date(), dateField4: new Date(), dateField5: new Date()}],
columns: [{
field: "dateField",
format: "{0:d}"
},{
field: "dateField1",
format: "{0:D}"
},{
field: "dateField2",
format: "{0:F}"
},{
field: "dateField3",
format: "{0:g}"
},{
field: "dateField4",
format: "{0:u}"
},{
field: "dateField5",
format: "{0:dd/MMMM/yyyy H:mm}"
}]
});
</script>
Default Date Formats
The following table lists the default Kendo UI date format specifiers.
| Specifier | Result |
|---|---|
standard |
Retrieved from the used Kendo UI culture script that is defined with the kendo.culture method. |
d |
Renders a short date pattern ("M/d/yyyy" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "d") -> 10/6/2000. |
D |
Renders a long date pattern ("dddd, MMMM dd, yyyy" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "D") -> Monday, November 06, 2000. |
F |
Renders a full date/time pattern ("dddd, MMMM dd, yyyy h:mm:ss tt" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "F") -> Monday, November 06, 2000 12:00:00 AM. |
g |
Renders a general date/time pattern (short time) ("M/d/yyyy h:mm tt" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "g") -> 11/6/2000 12:00 AM. |
G |
Renders a general date/time pattern (long time) ("M/d/yyyy h:mm:ss tt" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "G") -> 11/6/2000 12:00:00 AM. |
M or m
|
Render a month/day pattern ("MMMM dd" for en-US). For example, `kendo.toString(new Date(2000, 10, 6), "m") -> November 06. |
t |
Renders a short time pattern ("h:mm tt" for en-US). For example, kendo.toString(new Date(2000, 10, 6, 14, 30, 45), "t") -> 2:30 PM. |
T |
Renders a long time pattern ("h:mm:ss tt" for en-US). For example, kendo.toString(new Date(2000, 10, 6, 14, 30, 45), "T") -> 2:30:45 PM. |
s |
Renders universal sortable local date/time pattern ("yyyy-MM-dd HH:mm:ss" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "s") -> 2000-11-06 00:00:00. |
u |
Renders universal sortable UTC date/time pattern ("yyyy-MM-dd HH:mm:ssZ" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "u") -> 2000-11-06 00:00:00Z. |
Y or y
|
Renders a year/month pattern ("MMMM, yyyy" for en-US). For example, kendo.toString(new Date(2000, 10, 6), "y") -> November, 2000. |
Custom Date Formats
The following table lists the supported custom date format specifiers.
| Specifier | Result |
|---|---|
"d" |
Renders the day of the month, from 1 through 31. |
"dd" |
The day of the month, from 01 through 31. |
"ddd" |
The abbreviated name of the day of the week. |
"dddd" |
The full name of the day of the week. |
"f" |
The tenths of a second in a date and time value. |
"ff" |
The hundredths of a second in a date and time value. |
"fff" |
The milliseconds in a date and time value. |
"M" |
The month, from 1 through 12. |
"MM" |
The month, from 01 through 12. |
"MMM" |
The abbreviated name of the month. |
"MMMM" |
The full name of the month. |
"h" |
The hour, using a 12-hour clock from 1 to 12. |
"hh" |
The hour, using a 12-hour clock from 01 to 12. |
"H" |
The hour, using a 24-hour clock from 1 to 23. |
"HH" |
The hour, using a 24-hour clock from 01 to 23. |
"m" |
The minute, from 0 through 59. |
"mm" |
The minute, from 00 through 59. |
"s" |
The second, from 0 through 59. |
"ss" |
The second, from 00 through 59. |
"tt" |
The AM/PM designator. |
"yy" |
The last two characters from the year value. |
"yyyy" |
The year full value. |
"zzz" |
The local timezone when using formats to parse UTC date strings. |