Range Calendar

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

RangeCalendar 是一个强大、灵活且用户友好的用户界面组件，专为选择一系列日期而设计。它使用 React 构建，结合了日历和日期范围选择器的功能，使其成为需要用户输入开始和结束日期的应用程序的理想选择。如果设置 value 属性，则可以对其进行控制。或者，如果你不设置任何值，它可能会不受控制，但在这种情况下，你可以使用可选属性 defaultValue管理初始状态。默认情况下，组件不受控制。

§有用的补充

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

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

[!NOTE] Row with "Selected range: ..." is not a part of the component. It was added to examples only for clarity.

§大小

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

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

§价值

§最小值和最大值

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

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

§模式

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

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

months -显示一年中的月份

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

years -显示几年的选择时间

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

<RangeCalendar defaultMode="months"/>

§国家

§已禁用

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

<RangeCalendar
  disabled={true}
  defaultValue={{start: dateTime().add({days: 2}), end: dateTime().subtract({days: 2})}}
/>

§只读

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

<RangeCalendar
  readOnly={true}
  defaultValue={{start: dateTime().add({days: 2}), end: dateTime().subtract({days: 2})}}
/>

§聚焦价值

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

<RangeCalendar
  defaultFocusedValue={dateTimeParse('01.01.2020')} defaultValue={{start: dateTime().add({days: 2}), end: dateTime().subtract({days: 2})}}
/>

§时区

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

§属性