Date Components
3.4.1
• Relative Date Field组件
UIKit
7.26.2
AccordionActionTooltipAlertArrowToggleAvatarBreadcrumbsButtonCardCheckboxDisclosureDividerDropdownMenuHelpMarkHotkeyIconLabelLinkListLoaderMenuModalOverlayPaginationPalettePinInputPopoverPopupPortalProgressRadioRadioGroupSegmentedRadioGroupSelectSheetSkeletonSliderSpinStepperSwitchTableTabsTextTextAreaTextInputToasterTocTooltipUserUserLabel
Date Components
3.4.1
Navigation
3.10.1
Relative Date Field
view
size
placeholder
label
validationState
errorMessage
disabled
hasClear
hasTime
readOnly
pin
startContent
endContent
import {RelativeDateField} from '@gravity-ui/date-components';
RelativeDateField 组件仅用于输入相对日期。它不能用作 “普通” DateField。
§相对输入
该组件以特殊的相对格式获取值。您可以将值设置为公式,这将有助于您计算确切的日期。我们可以称之为它, grafana-like format 因为它与 Grafana 相对时间字段的格式非常相似。要了解有关 Grafana 中的相对时间值的更多信息 ,请阅读文档。
使用此模式,您可以将数据从源传输到目标,并直接在必要的端点上计算出确切的值,而不会出现不准确的情况。
§有效的输入规则
- 值应该从关键字开始
now - 常见的相对日期表达式如下所示:
now${operand}${count}${unit} - 以下各项的可用值
operand:--减法+-加法/-把它带到一开始unit
- 有效值
count-任意自然数 unit以下的有效值:d-天w-周M-月Q-四分之一y-年h-小时m-分钟
§用法示例
now-1d
now/w
now+10d-5d/M
§属性
| 姓名 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 咏叹调描述者 | 控件的 aria-describedby 属性 | string | |
| aria-详细信息 | 控件的 aria-details 属性 | string | |
| aria-label | 控件的 aria-label 属性 | string | |
| aria-labelledby | 控件的 aria-labelledby 属性 | string | |
| autoFocus | 控件的 autofocus 属性 | boolean | |
| className | 控件的包装器类名 | string | |
| defaultValue | 设置非受控组件的初始值。 | string | |
| 残疾的 | 表示用户无法与控件进行交互 | boolean | false |
| errorMessage | 错误文本 | ReactNode | |
| hasClear | 显示用于清除控件值的图标 | boolean | false |
| hasTime | 在弹出值中显示时间字段 | boolean | false |
| id | 控件的 id 属性 | string | |
| 标签 | 在输入节点左侧呈现的帮助文本 | string | |
| leftContent | 在标签和输入之前呈现的用户`节点 | React.ReactNode | |
| onBlur | 当控件失去对焦时触发。提供焦点事件作为回调的参数 | (e:FocusEvent<Element, Element>) => 无效) | |
| onFocus | 当控件获得焦点时触发。提供焦点事件作为回调的参数 | (e:FocusEvent<Element, Element>) => 无效) | |
| onKeyDown | 按下按键时触发。提供键盘事件作为回调的参数 | (e:keyboardEvent<Element>) = void)> | |
| onKeyUp | 释放密钥时触发。提供键盘事件作为回调的参数 | (e:keyboardEvent<Element>) = void)> | |
| onUpdate | 当用户更改该值时触发。提供新值作为回调的参数 | (值:字符串| null) => 无效 | |
| 大头针 | 拐角处的圆角 | string | 'round-round' |
| 占位符 | 未设置值时在控件中显示的文本 | string | |
| readOnly | 组件的值是否不可变。 | boolean | false |
| rightContent | 在输入节点和清除按钮之后呈现的用户`节点 | React.ReactNode | |
| 尺寸 | 控件的大小 | "s" "xl" | "m" |
| 风格 | 为元素设置行内样式。 | CSSProperties | |
| timeZone | 设置时区。了解有关时区的更多信息 | string | |
| validationState | 验证状态 | "invalid" | |
| 价值 | 控件的价值 | string null | |
| 观点 | 控件视图 | "normal" "clear" | "normal" |