Appearance

The Kendo UI for Vue Native 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 component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

• DatePicker Configurator demo
• DatePicker Sizes
• DatePicker Roundness
• DatePicker Fill Mode

Configurator demo

The following example demonstrates configuring different aspects of a DatePicker appearance through a configurator.

Size

The size of the DatePicker is controlled through its size property. The values we can pass to the property are as follows:

• small — Sets the padding to 2px and 8px.
• medium(Default) — Sets the padding to 4px and 8px.
• large — Sets the padding to 6px and 8px.
• null — Passing null to the size property gives us the option to define a custom CSS class that sets the padding of the DatePicker.

The following example demonstrates the usage of each size option:

Roundness

The roundness of the DatePicker is controlled through its rounded property. The values we can pass to the property are as follows:

• small — Sets the border radius to 1px.
• medium(Default) — Sets the border radius to 2px.

• large — Sets the border radius to 4px.

• full — Sets the border radius to 9999px.
• null — Passing null to the rounded property gives us the option to define a custom CSS class that defines the border-radius of the DatePicker.

The following example demonstrates the usage of each rounded option:

Fill Mode

The styling of the DatePicker is controlled through its fillMode property. The values we can pass to the property are as follows:

• solid (Default) — Sets a background color and solid borders.
• flat — Sets transparent background and borders in default state, and background color in focused state.
• outline — Sets a transparent background and solid borders.
• null — Passing null to the fillMode property gives us the option to define a custom CSS class that defines the background and border of the DatePicker.

The following example demonstrates the usage of each fillMode option:

Suggested Links

• API Reference of the DatePicker
• DatePicker size options
• DatePicker rounded options
• DatePicker fillMode options
• Customize the Color Inside the DatePicker Popup
• Creating Custom Styles with ThemeBuilder