Date Picker
Control to get / set a specific date using a calendar.
Module
import '@capitec/omni-components/date-picker';import { OmniDatePicker } from "@capitec/omni-components-react/date-picker";Source
@capitec/omni-components
Properties
| Name | Attribute | Type | Description |
|---|---|---|---|
| locale | locale | |
The locale used for formatting the output of the Date time picker. |
| minDate | min-date | |
The minimum date inclusively allowed to be selected. |
| maxDate | max-date | |
The maximum date inclusively allowed to be selected. |
| label | label | |
Text label. |
| value | value | |
Value entered into the form component. |
| data | data | |
Data associated with the component. |
| hint | hint | |
Hint message to assist the user. |
| error | error | |
Error message guiding a user to correct a mistake. |
| disabled | disabled | |
Indicator if the component should be disabled. |
| clearable | clearable | |
Toggles the ability to clear the value of the component. |
| dir | dir | |
Used to set the base direction of text for display |
| lang | lang | |
Used to identify the language of text content on the web |
Events
| Name | Type | Description |
|---|---|---|
| change | |
Dispatched when a date is selected. |
Slots
| Name | Description |
|---|---|
|
Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called |
|
Replaces the icon for the clear slot. |
|
Replaces the icon for the prefix slot. |
|
Replaces the icon for the suffix slot. |
Theme Variables
| Name | Description |
|---|---|
|
Theme primary color. |
|
Theme primary hover color. |
|
Theme primary active color. |
|
Theme accent color. |
|
Theme accent hover color. |
|
Theme accent active color. |
|
Theme background color. |
|
Theme background hover color. |
|
Theme background active color. |
|
Theme font color. |
|
Theme disabled border color. |
|
Theme disabled background color. |
|
Theme disabled background color. |
|
Theme error border color. |
|
Theme hint font color. |
|
Theme inactive color. |
|
Theme inactive color. |
|
Theme font family. |
|
Theme font size. |
|
Theme font weight. |
|
Theme border radius. |
|
Theme border width. |
|
Theme box shadow. |
Base Form Variables
| Name | Description |
|---|---|
|
Container font family. |
|
Container width. |
|
Container height. |
|
Layout border radius. |
|
Layout background color. |
|
Layout height. |
|
Layout width. |
|
Form border top. |
|
Form border bottom. |
|
Form border left. |
|
Form border right. |
|
Form border width. |
|
Form border radius. |
|
Form border style. |
|
Form border color. |
|
Form label margin left. |
|
Form label text align. |
|
Form label color. |
|
Form label font size. |
|
Form label font weight. |
|
Form label z-index. |
|
Form focussed border width. |
|
Form focussed border color. |
|
Form focussed label disabled background color. |
|
Form focussed label transform scale. |
|
Form focussed label left margin. |
|
Form focussed label color. |
|
Form focussed error label color. |
|
Form focussed label background color. |
|
Form focussed label left. |
|
Form focussed label right. |
|
Form error label color. |
|
Form error border color. |
|
Form label disabled color. |
|
Form disabled border color. |
|
Form disabled background color. |
|
Form disabled label focussed background color. |
|
Form hint label font color. |
|
Form hint label font family. |
|
Form hint label font size. |
|
Form hint label font weight. |
|
Form hint label top padding. |
|
Form hint label left padding. |
|
Form hint label border width. |
|
Form error label font color. |
|
Form error label font family. |
|
Form error label font size. |
|
Form error label font weight. |
|
Form error label top padding. |
|
Form error label left padding. |
|
Form error label border width. |
|
Form hover color. |
|
Form disabled hover color. |
|
Form error hover color. |
|
Form clear control right margin. |
|
Form clear control left margin. |
|
Form clear control width. |
|
Form clear icon color. |
|
Form clear slot height. |
|
Form clear slot width. |
Component Variables
| Name | Description |
|---|---|
|
Date picker input text align. |
|
Date picker input font color. |
|
Date picker input font family. |
|
Date picker input font size. |
|
Date picker input font weight. |
|
Date picker input height. |
|
Date picker input padding. |
|
Date picker width. |
|
Date picker min width. |
|
Date picker disabled font color. |
|
Date picker error font color. |
|
Date picker control padding. |
|
Date picker control hover. |
|
Date picker control icon width. |
|
Date picker control icon height. |
|
Date picker control icon color. |
|
Date picker control icon error color. |
|
Date picker control left border width. |
|
Date picker control left border color. |
|
Date picker control left border focused width. |
|
Date picker control left border focused color. |
|
Date picker control left border error color. |
|
Date picker container z-index. |
|
Date picker dialog left. |
|
Date picker dialog right |
|
Date picker dialog bottom |
|
Date picker dialog background color. |
|
Date picker container width. |
|
Date picker container top. |
|
Date picker container border bottom. |
|
Date picker container render bottom top. |