Formats

You can control the format of the TimePicker by using the format property.

The format property accepts string parameters and, by default, is set to 't'. When format is set and the input element is not focused, the value is formatted accordingly.

For more information on the supported date formats, refer to the Formatting Options section.

Change Theme

Theme

Loading ...

Formatting Options

The format option of the DateInput supports:

• Predefined date formats
• Custom date formats

Predefined Date Formats

The predefined date formats are specifiers that convert a valid JavaScript Date object into a human readable date or time based on the locale.

html

<kendo-timepicker format="T"></kendo-timepicker>

The following table lists the supported date format specifiers for the en locale.

Specifier	Description	Result
d	Short date pattern: M/d/y.	10/6/2025
D	Long date pattern: EEEE, MMMM d, y.	Monday, November 6, 2025
F	Full date and time pattern: EEEE, MMMM d, y h:mm:ss a.	Monday, November 6, 2025 12:00:00 AM
g	General date and time pattern (short time): M/d/y h:mm a.	11/6/2025 12:00 AM
G	General date and time pattern (long time): M/d/y h:mm:ss a.	11/6/2025 12:00:00 AM
m	Renders an abbreviated month and day pattern: MMM d.	Nov 6
M	Wide month and day pattern: MMMM d.	November 6
y	Renders an abbreviated month/year pattern: MMM y.	Nov 2025
Y	Wide month and year pattern: MMMM y.	November 2025
t	Short time pattern: h:mm a.	2:30 PM
T	Long time pattern: h:mm:ss a.	2:30:45 PM
s	Renders a universal sortable local date and time pattern: yyyy-MM-dd HH:mm:ss.	2025-11-06T00:00:00
u	Renders a universal sortable UTC date and time pattern: yyyy-MM-dd HH:mm:ssZ.	2025-11-06 00:00:00Z

Custom Date Formats

When the predefined date format options do not fit the requirements, you can create a custom date format string by using one or more custom date specifiers. This approach is useful when you want to format dates in a specific format.

html

<kendo-timepicker format="h a"></kendo-timepicker>
<kendo-timepicker format="k"></kendo-timepicker>

The following table lists the supported format specifiers that can be used in custom date formats:

Specifier	Description	Result
y	Renders the year.	y—Full year and month (Sep 2025). yy—Two digit year (96). yyy, yyyy—Full year (2025).
M	Renders the month.	M—Numerical month (1). MM—Zero-padded numerical month (01). MMM—Abbreviated month (Jan). MMMM—Wide month name (January). MMMMM—Narrow month name (J).
L	The same as the M specifier except that the L specifier uses the standalone names.	See M.
d	Renders the day of the month.	y d—Day of month (2025 8). y dd—Zero-padded day of month (2025 08).
E	Renders the day of the week.	E, EE, EEE—Abbreviated day name (Wed). EEEE—Wide day name (Wednesday). EEEEE—Narrow day name (W). EEEEEE—Short day name (We).
e	The same as the E specifier except that it adds a numeric value that depends on the local starting day of the week.	e—Numeric day of the week (3). ee—Zero-padded numeric day of the week (03).
c	The same as the e specifier except that it uses the standalone names.	See e.
a	Renders the day period.	a, aa, aaa—Short day period name(AM). aaaa—Wide day period name (AM). aaaaa—Narrow day period name (a).
h	Renders the hour using a 12-hour clock from 1 to 12.	h a—Show hour (1 PM). hh a—Zero-padded hour (01 PM).
H	Renders the hour using a 24-hour clock from 1 to 23.	H:mm—Show hour (1:00). HH:mm—Two digits hour (13:00).
k	Renders the hour using a 24-hour clock from 1 to 24.	k—Show hour (24). kk—Two digits hour (01).
K	Renders the hour using a 12-hour clock from 0 to 11.	K a—Show hour (1 AM). KK a—Two digits hour (01 PM).
m	Renders the minutes from 0 to 59.	H:m—Show minutes (1:1). H:mm—Two digits minutes (1:01).
s	Renders the seconds from 0 to 59.	HH:mm:s—Show seconds (01:01:1). HH:mm:ss—Two digits seconds (01:01:01).
S	Renders the fractional seconds. It truncates based on the number of letters.	s.S—Show fractional seconds (1.1). s.SS—Two digits fractional seconds (1.12). s.SSS—Three digits fractional seconds (1.123).
q	The same as the Q specifier except that the q specifier uses the standalone names.	See Q.
Q	Renders a quarter of the year.	Q, QQ—Numerical quarter (3). QQQ—Abbreviated quarter (Q3). QQQQ—Wide quarter name (3rd quarter). QQQQQ—Narrow quarter name (3).
z	Renders the timezone.	z, zz, zzz—Short localized GMT format (GMT+2). zzzz—Long localized GMT format (GMT+02:00).
Z	Renders the timezone.	Z, ZZ, ZZZ—Show the ISO8601 format with hours and minutes (+0200). ZZZZ—Long localized GMT format (GMT+02:00). ZZZZZ—Extended ISO8601 format (+02:00).
x	The same as the X specifier except that the x specifier does not add the UTC indicator when the offset is 0 (zero).	See X.
X	Renders the timezone.	X—Show the ISO8601 format with hours and optional minutes (+02). XX, XXXX—Show the ISO8601 format with hours and minutes (+0200). XXX, XXXXX—Extended ISO8601 format (+02:00).
G	Renders the era name.	Q, QQ, QQQ—Abbreviated era (AD). QQQQ—Wide era name (Anno Domini). QQQQQ—Narrow era name (A).

Suggested Links

• API Reference of the TimePicker
• Supported Date and Number Formats