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.

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.

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.

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.

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