Appearance
The DateTimePicker
provides a predefined set of appearance options.
Apart from the default vision of the DateTimePicker
, 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:
- DateTimePicker Configurator demo
- DateTimePicker Sizes
- DateTimePicker Roundness
- DateTimePicker Fill Mode
Configurator demo
The following example demonstrates configuring different aspects of a DateTimePicker
appearance through a configurator.
Size
The size of the DateTimePicker
is controlled through its size
property. The values we can pass to the property are as follows:
small
— Sets thepadding
to2px
and8px
.medium
(Default) — Sets thepadding
to4px
and8px
.large
— Sets thepadding
to6px
and8px
.null
— Passingnull
to thesize
property gives us the option to define acustom CSS class
that sets thepadding
of the DateTimePicker.
The following example demonstrates the usage of each size
option:
Roundness
The roundness of the DateTimePicker
is controlled through its rounded
property. The values we can pass to the property are as follows:
small
— Sets theborder radius
to1px
.medium
(Default) — Sets theborder radius
to2px
.
large
— Sets theborder radius
to4px
.
full
— Sets theborder radius
to9999px
.null
— Passingnull
to therounded
property gives us the option to define acustom CSS class
that defines theborder-radius
of the DateTimePicker.
The following example demonstrates the usage of each rounded
option:
Fill Mode
The styling of the DateTimePicker
is controlled through its fillMode
property. The values we can pass to the property are as follows:
solid
(Default) — Sets abackground
color andsolid borders
.flat
— Setstransparent background and borders
in default state, andbackground color
in focused state.outline
— Sets atransparent background
andsolid borders
.null
— Passingnull
to thefillMode
property gives us the option to define acustom CSS class
that defines thebackground
andborder
of the DateTimePicker.
The following example demonstrates the usage of each fillMode
option: