Relative Date Picker

view
size
placeholder
label
validationState
errorMessage
disabled
hasClear
readOnly
format
pin
minValue
maxValue
import {RelativeDatePicker} from '@gravity-ui/date-components';

RelativeDatePicker is almost the same component as DatePicker but it has ability to use relative dates.

Difference from DatePicker

RelativeDatePicker can work in two modes: absolute and relative. You can switch it interactively by click on f(x) button. Or you can set field type in value or defaultValue object.

Absolute

RelativeDatePicker's behaviour in absolute mode is very similar to simple DatePicker.

Learn more about DatePicker

Relative

In this mode RelativeDatePicker get and return values in special relative format.

Learn more about rules of relative formulas

Properties

NameDescriptionTypeDefault
aria-describedbyThe control's aria-describedby. Identifies the element (or elements) that describes the object. attributestring
aria-detailsThe control's aria-details. Identifies the element (or elements) that provide a detailed, extended description for the object. attributestring
aria-labelThe control's aria-label. Defines a string value that labels the current element. attributestring
aria-labelledbyThe control's aria-labelledby. Identifies the element (or elements) that labels the current element. attributestring
autoFocusThe control's autofocus. Whether the element should receive focus on render. attributeboolean
classNameThe control's wrapper class namestring
defaultValueSets the initial value for uncontrolled component.Value
disabledIndicates that the user cannot interact with the controlbooleanfalse
errorMessageError textReactNode
formatFormat of the date when rendered in the input. Available formatsstring
hasClearShows the icon for clearing control's valuebooleanfalse
idThe control's id attributestring
isDateUnavailableCallback that is called for each date of the calendar. If it returns true, then the date is unavailable.((date: DateTime) => boolean)
labelHelp text rendered to the left of the input nodestring
maxValueThe maximum allowed date that a user may select.DateTime
minValueThe minimum allowed date that a user may select.DateTime
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: Value | null) => void
pinCorner roundingTextInputPin'round-round'
placeholderText that appears in the control when it has no value setstring
placeholderValueA placeholder date that controls the default values of each segment when the user first interacts with them.DateTimetoday's date at midnigh
readOnlyWhether the component's value is immutable.booleanfalse
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 controlValue null
viewThe view of the control"normal" "clear""normal"