Gravity UI – Date Components – Relative Date Field

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 the unit
valid values of count - any natural number
valid values of unit:
- d - day
- w - week
- M - month
- Q - quarter
- y - year
- h - hour
- m - 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"`

Relative Date Field

§Relative input

§Valid input rules

§Examples of usage

§Properties

Relative input

Valid input rules

Examples of usage

Properties