Date Field

import {DateField} from '@gravity-ui/date-components';

DateField 组件是一个多功能且便捷的输入字段，专为 React 应用程序中的日期输入而设计。它具有直观的界面和易于集成，非常适合需要输入日期或时间的任何表单，例如活动计划程序、预订系统或数据驱动的报告。如果设置 value 属性，则可以对其进行控制。或者，如果你不设置任何值，它可能会不受控制，但在这种情况下，你可以使用可选属性 defaultValue管理初始状态。默认情况下，组件不受控制。

§有用的补充

要以正确的格式设置日期，您可能需要包括 D ate Util s 库中的其他助手

import {dateTimeParse} from '@gravity-ui/date-utils';

§外观

的 DateField 外观由 size 、 view 和 pin 属性控制。

§大小

要控制大小， DateField 请使用该 size 属性。默认大小为 m。

<DateField size="s" />
<DateField size="m" />
<DateField size="l" />
<DateField size="xl" />

§查看

normal -的主视图 DateField （默认使用）。

<DateField />

clear - DateField 无可见边框的视图（可与自定义包装一起使用）

<DateField view="clear" />

§别针

该 pin 属性允许您控制左右边缘的形状，通常用于将多个控件组合成一个单元。 该 pin 属性的值由左边的样式名称除以短划线组成，例如 "round-brick"。 边缘样式为： round （默认） circle 、 brick 和 clear。

<DateField pin="round-brick" />
<DateField pin="brick-brick" />
<DateField pin="brick-round" />

§价值

§最小值和最大值

该 minValue 属性允许您指定用户可以输入的最早日期和时间。相反，该 maxValue 属性指定了可以输入的最新日期和时间。如果你输入的值超出这个边界组件，它的视图就会改变，就像在验证状态无效的情况下一样。

<DateField minValue={dateTimeParse('01.01.2024')} placeholder={"minValue: '01.01.2024'"}/>
<DateField maxValue={dateTimeParse('01.01.2025')} placeholder={"maxValue: '01.01.2025'"}/>

§国家

§已禁用

您不希望用户能够与组件交互的状态。 DateField

<DateField disabled={true} defaultValue={dateTimeParse(new Date())} />

§只读

readOnly 是一个布尔属性，当设置为 true 时，该 DateField 组件对用户来说是不可变的。这意味着，虽然输入将显示其当前值，但用户将无法对其进行更改。

<DateField readOnly defaultValue={dateTimeParse(new Date())} />

§错误

您要指明用户输入错误的状态。 DateField要更改 DateField 外观，请使用带有 "invalid" 值的 validationState 属性。可以通过该 errorMessage 属性添加可选的消息文本。消息文本将在组件下方呈现。

<DateField errorMessage="Error message" validationState="invalid" />
<DateField validationState="invalid" />

§其他内容

§占位符

这个道具允许你提供一个简短的提示来描述输入字段的预期值。此提示在用户输入值之前显示在输入字段中，并在输入文本时消失。

<DateField placeholder='Placeholder' />

§标签

允许您将标签放在字段的左侧。标签占用的宽度不能超过整个空间宽度的一半 DateField。

<DateField label="Label" />
<DateField label="Very long label with huge amount of symbols" />

§“清除” 按钮

hasClear 是一个布尔道具，它使用户能够快速清除输入字段的内容。

<DateField hasClear />

§开始内容

允许您向字段的起始部分添加内容。它位于所有其他组件之前。

<DateField label="Label" startContent={<Label size="s">Start content</Label>} />

§结束内容

允许您向字段的末尾部分添加内容。它放置在所有其他组件之后。

<DateField endContent={<Label size="s">End content</Label>} hasClear/>

§格式

format prop 是一个字符串，用于定义 DateField 组件将接受和显示的日期和时间格式。这个属性决定了如何直观地向用户呈现日期和时间，以及如何格式化用户的输入。可用格式

<DateField format='LTS' />

§时区

timeZone 是设置输入中值的时区的属性。了解有关时区的更多信息

§属性