Date Components
3.1.0
• Relative Date FieldКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
Relative Date Field
view
size
placeholder
label
validationState
errorMessage
disabled
hasClear
hasTime
readOnly
pin
startContent
endContent
import {RelativeDateField} from '@gravity-ui/date-components';
RelativeDateField
component is used only for entering relative dates. It can't be used as "normal" DateField
.
§Relative input
The component get values in special relative format. You set values as formulas which will help you to compute the exact date. We can call it grafana-like format
because it is very similar to format of Grafana's relative time fields. To know more about relative time values in Grafana read the docs.
Using this mode you can deliver your data from source to destination and compute the exact value straight on the necessary endpoit without inaccuracy.
§Valid input rules
- a value should starts from keyword
now
- relative date expression in common looks like:
now${operand}${count}${unit}
- available values for
operand
:-
- subtraction+
- addition/
- bringing to the start of theunit
- valid values of
count
- any natural number - valid values of
unit
:d
- dayw
- weekM
- monthQ
- quartery
- yearh
- hourm
- minute
§Examples of usage
now-1d
now/w
now+10d-5d/M
§Properties
Name | Description | Type | Default |
---|---|---|---|
aria-describedby | The control's aria-describedby attribute | string | |
aria-details | The control's aria-details attribute | string | |
aria-label | The control's aria-label attribute | string | |
aria-labelledby | The control's aria-labelledby attribute | string | |
autoFocus | The control's autofocus attribute | boolean | |
className | The control's wrapper class name | string | |
defaultValue | Sets the initial value for uncontrolled component. | string | |
disabled | Indicates that the user cannot interact with the control | boolean | false |
errorMessage | Error text | ReactNode | |
hasClear | Shows the icon for clearing control's value | boolean | false |
hasTime | Show time field in popupvalue | boolean | false |
id | The control's id attribute | string | |
label | Help text rendered to the left of the input node | string | |
leftContent | The user`s node rendered before label and input | React.ReactNode | |
onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | ((e: FocusEvent<Element, Element>) => void) | |
onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | ((e: FocusEvent<Element, Element>) => void) | |
onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | ((e: KeyboardEvent<Element>) => void) | |
onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | ((e: KeyboardEvent<Element>) => void) | |
onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | ((value: string | null) => void | |
pin | Corner rounding | string | 'round-round' |
placeholder | Text that appears in the control when it has no value set | string | |
readOnly | Whether the component's value is immutable. | boolean | false |
rightContent | User`s node rendered after the input node and clear button | React.ReactNode | |
size | The size of the control | "s" "m" "l" "xl" | "m" |
style | Sets inline style for the element. | CSSProperties | |
timeZone | Sets the time zone. Learn more about time zones | string | |
validationState | Validation state | "invalid" | |
value | The value of the control | string null | |
view | The view of the control | "normal" "clear" | "normal" |