Date Picker

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

DatePicker 是一个复杂、轻量级且完全可自定义的组件，旨在在 React 应用程序中提供直观的日期选择功能。它在构建时考虑了用户体验和易于集成，可无缝地融入表单、模态或任何需要输入日期的用户界面元素。如果设置 value 属性，则可以对其进行控制。或者，如果你不设置任何值，它可能会不受控制，但在这种情况下，你可以使用可选属性 defaultValue管理初始状态。默认情况下，组件不受控制。

§有用的补充

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

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

§外观

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

§大小

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

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

§查看

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

<DatePicker />

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

<DatePicker view="clear" />

§别针

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

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

§价值

§最小值和最大值

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

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

§国家

§已禁用

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

<DatePicker disabled={true} defaultValue={dateTime()} />

§只读

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

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

§错误

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

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

§其他内容

§占位符

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

<DatePicker placeholder="Placeholder" />

§标签

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

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

§“清除” 按钮

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

<DatePicker hasClear />

§格式

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

<DatePicker format='LL' />

§时区

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

§定制

如果你想在里面使用自定义日历组件， DatePicker 你可以把它和日历类似 props 一样传递。 children

Learn more about calendar

§属性