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 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

NameDescriptionTypeDefault
aria-describedbyThe control's aria-describedby attributestring
aria-detailsThe control's aria-details attributestring
aria-labelThe control's aria-label attributestring
aria-labelledbyThe control's aria-labelledby attributestring
autoFocusThe control's autofocus attributeboolean
classNameThe control's wrapper class namestring
defaultValueSets the initial value for uncontrolled component.string
disabledIndicates that the user cannot interact with the controlbooleanfalse
errorMessageError textReactNode
hasClearShows the icon for clearing control's valuebooleanfalse
hasTimeShow time field in popupvaluebooleanfalse
idThe control's id attributestring
labelHelp text rendered to the left of the input nodestring
leftContentThe user`s node rendered before label and inputReact.ReactNode
onBlurFires when the control lost focus. Provides focus event as a callback's argument((e: FocusEvent<Element, Element>) => void)
onFocusFires when the control gets focus. Provides focus event as a callback's argument((e: FocusEvent<Element, Element>) => void)
onKeyDownFires when a key is pressed. Provides keyboard event as a callback's argument((e: KeyboardEvent<Element>) => void)
onKeyUpFires when a key is released. Provides keyboard event as a callback's argument((e: KeyboardEvent<Element>) => void)
onUpdateFires when the value is changed by the user. Provides new value as an callback's argument((value: string | null) => void
pinCorner roundingstring'round-round'
placeholderText that appears in the control when it has no value setstring
readOnlyWhether the component's value is immutable.booleanfalse
rightContentUser`s node rendered after the input node and clear buttonReact.ReactNode
sizeThe size of the control"s" "m" "l" "xl""m"
styleSets inline style for the element.CSSProperties
timeZoneSets the time zone. Learn more about time zonesstring
validationStateValidation state"invalid"
valueThe value of the controlstring null
viewThe view of the control"normal" "clear""normal"