The way the dates are shown on the axis labels, series labels and series tooltips are controlled via the DataFormatString property that must be set in the corresponding chart element as follows:
Series Labels and Series Tooltips - {0} and/or {1} placeholders are used to denote the corresponding SeriesItem's X and/or Y value in the DateFormatString followed by ':' and the desired date specifier(e.g.,
DataFormatString='{1} units are ordered on {0:d}').Axis Labels - Only the desired date specifier must be set in the DateFormatString property,as placeholders are not applicable (e.g., DataFormatString='y').
Currently telerik MVC grid with DateTime column render datetime in local time zone. Nothing but if browser is accessing the site from CST time zone, grid automatically converting EST time to CST and shows value in CST. We have seen workaround as saving and showing data in UTC format. However this is not acceptable for some business scenarios. Date Formatting not working - Telerik grid details. Ask Question Asked 6 years, 8 months ago. Active 6 years, 6 months ago. Viewed 2k times 1. I am hoping this is easy. I googled and looked through the forums and cannot find a solid answer. Browse other questions tagged asp.net-mvc format telerik-grid or ask your own question. We will take a basic usage of displaying data in a grid format in an ASP.NET MVC view. To know more about Kendo UI Web controls head over to www.kendoui.com. If you want to follow along with this blog post, you can do so by downloading a 30 day free trial of Kendo UI Complete for ASP.NET MVC. Anil Singh 11:15 PM 23 Best Kendo UI Angular 2 DropDownList Actions How To, Angular2 Datepicker ng2 date format, kendo ui angular 2 grid dropdown filters Edit Aug 08, 2016 Kendo UI Grid Custom Date Filter. Net Core and MVC is used to display data, by default using a table, but that can be changed. 6m developers to have your questions.
Date formats can be used inside the Client Templates . You can find more information in the Formatting Numbers article, in the section, Formatting Labels and Tooltips by Using their Client Templates.
Table 1 lists standard date format specifiers with descriptions. Figure 1 shows formatting the d, m|M and D pattern while Example 1 shows the markup to create the figure.
Table 1: List of standard date format specifiers with descriptions.
| Format Specifier | Description | Pattern Equivalent (for en-US Culture) |
|---|---|---|
| d | short date pattern | M/d/yyyy (e.g., the date 11th of November 2000 will be formatted as '11/6/2000') |
| D | long date pattern | dddd, MMMM dd, yyyy (e.g., the date 11th of November 2000 will be formatted as 'Monday, November 06, 2000') |
| F | full date/time pattern | dddd, MMMM dd, yyyy h:mm:ss tt (e.g., the date 11th of November 2000 will be formatted as 'Monday, November 06, 2000 12:00:00 AM') |
| g | general date/time pattern (short time) | M/d/yyyy h:mm tt (e.g., the date 11th of November 2000 will be formatted as '11/6/2000 12:00 AM') |
| G | general date/time pattern (long time) | M/d/yyyy h:mm:ss tt (e.g., the date 11th of November 2000 will be formatted as '11/6/2000 12:00:00 AM') |
| m or M | month/day pattern | MMMM dd (e.g., the date 11th of November 2000 will be formatted as 'November 06') |
| u | universal sortable date/time pattern | yyyy'-'MM'-'dd HH':'mm':'ss'Z' (e.g., the date 11th of November 2000 will be formatted as '2000-11-06 00:00:00Z') |
| y or Y | month/year pattern | MMMM, yyyy (e.g., the date 11th of November 2000 will be formatted as 'November, 2000') |
Table 2 lists custom date format specifiers with descriptions. Figure 2 shows formatting the 'MMM-yyyy', 'ddd, MMM, yyyy' and 'MMM yyyy' pattern while Example 2 shows the markup to create the figure.
Table 2: List of custom date format specifiers with descriptions.
| Format Specifier | Description |
|---|---|
| d | The day of the month from 1 to 31. |
| dd | The zero-padded day of the month from 01 to 31. |
| ddd | The abbreviated name of the day of the week. |
| dddd | The full name of the day of the week. |
| M | The month from 1 to 12. |
| MM | The zero-padded month from 01 to 12. |
| MMM | The abbreviated name of the month. |
| MMMM | The full name of the month. |
| yy | The year, from 00 to 99. |
| yyyy | The year as a four-digit number. |
| h | The hour, using 12-hour clock from 1 to 12. |
| hh | The zero-padded hour, using 12-hour clock from 01 to 12. |
| H | The hour, using 24-hour clock from 0 to 23. |
| HH | The zero-padded hour, using 24-hour clock from 00 to 23. |
| m | The minute from 0 to 59. |
| mm | The zero-padded minute from 00 to 59. |
| s | The second from 0 to 59. |
| ss | The zero-padded second from 00 to 59. |
| tt | The AM/PM designator. |
Figure 1: Formatting axis labels, series labels and series tooltip with standard format via the DateFormatString property.
Example 1 shows the simple markup used to format the series labels, axis labels and series tooltip with standard format in Figure 1.
Figure 2: Formatting axis labels, series labels and series tooltip with custom pattern via the DateFormatString property.
Example 2 shows the simple markup used to format the series labels, axis labels and series tooltip with custom pattern in Figure 2.
The above dates are formatted in the default 'en-US' culture. More information on how to localize text elements is available in the Localization article.
See Also
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.
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. |
Telerik Mvc Grid Example
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. |