New to KendoReact? Start a free 30-day trial

Placeholders

The DateTimePicker enables you to render a text hint for its input field and to provide descriptions for the format sections.

Text Hints

When the value of the DateTimePicker is null, or there is no partial selection, you can specify a text hint for the input field by setting the placeholder option of the component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Floating Labels

You can specify a floating label for the input field by setting the label property of the DateInput. Also, to disable the default date mask of the DateTimePicker when no value is present, set its placeholder value to an empty string.

Example
View Source
Edit In Stackblitz  
Change Theme:

Format Sections Description

The formatPlaceholder option enables you to set the way the format sections of the input field are rendered. For example, whether the month input is prompted as month or MM.

The formatPlaceholder provides the following available options which you can set:

  • 'wide'Displays the full description of the format section. For example, turns MM into month. Retrieved from CLDR.
  • 'narrow'Displays the narrow description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'short'Displays the short description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'formatPattern'Directly displays the format section. For example, turns MM into MM.
  • CustomFormatPlaceholderAn object that defines the description of the format sections. For example, { day: 'd.', month: 'M.', year: 'y', hour: 'h.' }.
Example
View Source
Edit In Stackblitz  
Change Theme: