Calendar

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

Calendar 是一个灵活的、用户友好的日历组件，用于 React 应用程序。它允许用户轻松查看、选择和管理日期。非常适合活动安排、预订系统以及任何需要选择日期的应用程序。如果设置 value 属性，则可以对其进行控制。或者，如果你不设置任何值，它可能会不受控制，但在这种情况下，你可以使用可选属性 defaultValue管理初始状态。默认情况下，组件不受控制。

§有用的补充

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

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

§大小

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

<Calendar size="m" />
<Calendar size="l" />
<Calendar size="xl" />

§价值

§最小值和最大值

该 minValue 属性允许您指定用户可以输入的最早日期和时间。相反，该 maxValue 属性指定了可以输入的最新日期和时间。用户的所有其他值都将被禁用。

<Calendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />

§模式

定义 Calendar 应显示的时间间隔。有了它， mode 你可以以可控的方式进行选择。对于不受控制的方式，您无需指定任何值。你也可以使用 defaultMode 道具以不受控制的方式设置初始模式。

days -的默认模式 Calendar。它显示一个月中的天数。

months -显示一年中的月份

quarters -按年显示季度（不可作为数值提供 defaultMode）

years -显示几年的选择时间

你可以使用 prop 来限制已启用的模式 modes。

<Calendar defaultMode="months"/>

§国家

§已禁用

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

<Calendar disabled={true} />

§只读

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

<Calendar readOnly={true} />

§聚焦价值

允许选择 Calendar 视图聚焦的日期。如果你需要对其进行控制，你应该使用 focusedValue 道具。您可以使用可选 prop defaultFocusedValue 为不受控制的组件设置初始焦点值。

<Calendar defaultFocusedValue={dateTimeParse('01.01.2020')} />

§时区

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

§属性