---
title: Overview
position: 1
seo_title: Overview of the DateTimePicker Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
DateTimePicker component and its types, check out the extensive set of
available options in its live demo, and master its appearance by setting the
size, fill mode, and border radius as you wish on the fly.
---
## DateTimePicker Overview
The DateTimePicker is a user interface component that allows users to select both date and time from a single control. Users can either input values directly into the field or use the calendar and time selector views combined in a popup. The component is particularly useful for applications that require accurate scheduling, such as booking systems or event planning. It enables users to set dates and times precisely and efficiently, making the process streamlined and straightforward.
### Live Demo
### Appearance
The DateTimePicker component provides built-in styling options that grant visually appealing and flexible rendering experience.
Apart from the default vision of the Telerik and Kendo UI DateTimePicker, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.
#### States
Depending on the action you want to imply through its appearance, the Telerik and Kendo UI DateTimePicker can acquire various states which you can set by using the following classes:
* A DateTimePicker in its normal state is fully active, but the user is not interacting with it. This is the default state of the component. It can contain an explanatory placeholder text or an already prefilled text.
* `k-hover`—The hover state of a DateTimePicker is applied when the user hovers over the component but does not click it. The mouse pointer changes to indicate that you can type into the component.
* `k-focus`—The focus state of the DateTimePicker is triggered when the user navigates to the component by keyboard, voice, or mouse click. This state highlights the DateTimePicker so that it covers all accessibility requirements.
* `k-invalid`—The invalid state of the DateTimePicker indicates that the input validation requirements are not met. The user is notified that the entered data is incorrect and must be revised so that the input operation can complete.
* `k-invalid k-focus`—The invalid focus state is a result of spotlighting a DateTimePicker whose value or input type does not pass the validation requirements.
* `k-disabled`—The disabled state of the DateTimePicker indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.
#### Anatomy
The anatomy of the DateTimePicker summarizes the elements of the component.
The next image shows the anatomy of a DateTimePicker and includes the following elements:
#### Size
The DateTimePicker provides the `size` configuration option that enables you to control how big or small the rendered DateTimePicker is. Options for size customization are also at your disposal.
`size` provides the following available options:
* `small`—Renders small DateTimePickers, which are suitable for compact components, such as Toolbars, where the available space is limited.
* `medium` (default)—Renders medium DateTimePickers.
* `large`—Renders large DateTimePickers, which are suitable for adaptive designs.
* `none`—Does not set a `size` and allows you to add your own, custom value.
#### Fill Mode
The DateTimePicker provides the `fillMode` configuration option that enables you to visually achieve a certain atmosphere in your app. DateTimePicker also provides options for fill-mode customization. By default, the DateTimePicker is rendered in solid colors.
`fillMode` provides the following available options:
* `solid` (default)—The solid fill mode focuses on the layout and emphasizes the text field. It can be wrapped in a container with a different background color making the DateTimePicker stand out.
* `outline`—The outline fill mode focuses less on the text field. The outlined DateTimePicker does not have a background fill and can blend with the surrounding UI environment.
* `flat`—The flat fill mode emphasizes less the text field and more the data input. Also, the flat fill mode reduces additional visual noise and focuses on the content.
* `none`—Does not set a `fillMode` and allows you to add your own, custom value.
#### Border Radius
The DateTimePicker provides the `rounded` option that enables you to control the border radius of the rendered input field. The defined value for the border radius significantly affects the look-and-feel of the UI. The DateTimePicker also provides options for border-radius customization.
`rounded` provides the following available options:
* `small`—Renders a border radius of 2 px.
* `medium` (default)—Renders a border radius of 4 px.
* `large`—Renders a border radius of 6 px.
* `full`—Renders a border radius of 9999 px.
* `none`—Does not set a `rounded` value and allows you to add your own, custom value.
### Framework-Specific Documentation
For specific information about the component, refer to its official product documentation:
