New to KendoReactLearn about KendoReact Free.

Appearance

Updated on Aug 13, 2026

The DatePicker provides a predefined set of appearance options.

Apart from the default vision of the DatePicker, these alternative styling options enable you to configure each individual aspect of the appearance of a DatePicker.

The following example demonstrates all the available appearance options of the DatePicker in a single, configurable demo.

Example
View Source
Loading ...

Size

You can set the size of the DatePicker through the size property. The DatePicker component comes in three different sizes: small, medium (default), and large.

Example
View Source
Loading ...

Fill Mode

You can set the fill mode of the DatePicker through the fillMode property. The DatePicker provides three different fill mode options: solid (default), outline, and flat.

Example
View Source
Loading ...

Rounded

You can set the roundness of the DatePicker through the rounded property. The DatePicker component supports five different degrees of roundness: small, medium (default), large, full, and none.

Example
View Source
Loading ...
In this article
SizeFill ModeRoundedSuggested Links
Not finding the help you need?
Contact Support