Range Calendar

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

RangeCalendar is a powerful, flexible, and user-friendly UI component designed for selecting a range of dates. Built with React, it combines the functionality of a calendar and a date range picker, making it an ideal choice for applications that require users to input a start and end date. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.

§Useful addition

To set dates in the right format you may need to include additional helpers from Date Utils library

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.

§Size

To control the size of the RangeCalendar use the size property. Default size is m.

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

§Value

§Min and max value

The minValue property allows you to specify the earliest date and time that can be entered by the user. Conversely, the maxValue property specifies the latest date and time that can be entered. All other values will be disabled for user.

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

§Mode

Defines the time interval that RangeCalendar should display. With mode you can choose it in controlled way. For uncontrolled way you don't need to specify any value. Also you can set the initial mode in uncontrolled way with defaultMode prop.

days - default mode for RangeCalendar. It shows days in month.

months - shows months in year

quarters - shows quarters by years (not available as value in defaultMode)

years - shows several years for select

You can limit enabled modes by using prop modes.

<RangeCalendar defaultMode="months"/>

§States

§Disabled

The state of the RangeCalendar where you don't want the user to be able to interact with the component.

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

§Readonly

readOnly is a boolean attribute that, when set to true, makes the RangeCalendar component immutable to the user. This means that while the input will display its current value, users will not be able to change it.

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

§Focused value

Allows to select the date that RangeCalendar view is focused on. If you need it to be controlled you shoud use focusedValue prop. You can set the initial focused value for uncontrolled component with optional prop defaultFocusedValue.

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

§Time zone

timeZone is the property to set the time zone of the value in the input. Learn more about time zones

§Properties