Formats

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

The component can be configured either to display a single format at all times, or to display the value in different formats when the input is focused or blurred.

Single Format

To always display a single format, provide a string value to the format property. By default, format is set to 'd'.

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

Change Theme

Theme

Loading ...

Display and Input Formats

To display different formats when an input is focused and when blurred, set the format property to a FormatSettings object. Set the inputFormat to format the date when the input is focused and displayFormat when the input is blurred. Both properties can be set to a string or DateFormatOptions object:

html

<kendo-datetimepicker [format]="dateFormat"></kendo-datetimepicker>

ts

public dateFormat: FormatSettings = {displayFormat: 'D', inputFormat: 'd'};

The DateFormatOptions object supports:

• Predefined formats (defined by the Unicode Locale Data Markup Language)—Sets the format from the dateFormats, timeFormats, and dateTimeFormats elements of the calendar.
  ts

  public dateFormat: FormatSettings = { displayFormat: { date: 'long' }};

• Skeleton formats—Sets the format from the availableFormats of the calendar based on the date fields that you want to display.
  ts

  public dateFormat: FormatSettings = { displayFormat: { skeleton: 'yMMMdEHm' }}

• Fields formats—Similar to the skeleton formats except that you need to set the required fields by using separate options in the same way as the Intl.DateTimeFormat object.
  ts

  public dateFormat: FormatSettings = {
      displayFormat: { year: 'numeric', month: 'long' },
  };

The following example demonstrates how to set the inputFormat and displayFormat to a string or DateFormatOptions object.

Change Theme

Theme

Loading ...

Two-Digit Year Format

When the DateTimePicker format includes a two-digit year, the value will automatically be normalized to the current or previous century.

Whether the value will be assumed to be from the current or previous century is controlled by the twoDigitYearMax property. If the typed value is less than or equal to the twoDigitYearMax value, the date will be assumed to be from the current century. If it's more than it, the date will be assumed to be from the previous century.

By default, the twoDigitYearMax is set to 68.

Values selected from the popup Calendar are not normalized. To prevent the user from selecting an out-of-range value from it, provide the DateTimePicker with the desired min and max values.

Change Theme

Theme

Loading ...

Formatting Options

The format option of the DateTimePicker 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-datetimepicker format="D"></kendo-datetimepicker>

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-dateinput format="dd MMM"></kendo-dateinput>
<kendo-dateinput format="QQQ y"></kendo-dateinput>
<kendo-dateinput format="HH:mm:ss"></kendo-dateinput>

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 DateTimePicker
• Supported Date and Number Formats
• Angular DateTime Picker