Range Calendar

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

RangeCalendar es un componente de interfaz de usuario potente, flexible y fácil de usar diseñado para seleccionar un rango de fechas. Creado con React, combina la funcionalidad de un calendario y un selector de rango de fechas, lo que lo convierte en una opción ideal para las aplicaciones que requieren que los usuarios ingresen una fecha de inicio y finalización. Se puede controlar si se establece la value propiedad. O puede estar descontrolado si no establece ningún valor, pero en este caso puede administrar el estado inicial con una propiedad defaultValue opcional. El componente no está controlado de forma predeterminada.

§Adición útil

Para establecer las fechas en el formato correcto, es posible que deba incluir ayudantes adicionales de la biblioteca de Date Utils.

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.

§Tamaño

Para controlar el tamaño del RangeCalendar uso de la size propiedad. El tamaño predeterminado es m.

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

§Valor

§Valor mínimo y máximo

La minValue propiedad permite especificar la fecha y la hora más tempranas que puede introducir el usuario. Por el contrario, la maxValue propiedad especifica la fecha y la hora más recientes que se pueden introducir. Todos los demás valores se deshabilitarán para el usuario.

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

§Modo

Define el intervalo de tiempo que RangeCalendar debe mostrarse. Con mode usted puede elegirlo de forma controlada. De forma descontrolada, no es necesario especificar ningún valor. También puedes configurar el modo inicial de forma descontrolada con defaultMode prop.

days- modo predeterminado para RangeCalendar. Muestra los días del mes.

months- muestra los meses del año

quarters- muestra trimestres por años (no está disponible como valor en defaultMode)

years- muestra varios años para seleccionar

Puedes limitar los modos habilitados mediante el uso de prop. modes

<RangeCalendar defaultMode="months"/>

§Estados

§Discapacitado

El estado en el RangeCalendar que no desea que el usuario pueda interactuar con el componente.

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

§Solo lectura

readOnly es un atributo booleano que, cuando se establece en verdadero, hace que el RangeCalendar componente sea inmutable para el usuario. Esto significa que, si bien la entrada mostrará su valor actual, los usuarios no podrán cambiarla.

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

§Valor enfocado

Permite seleccionar la fecha en la que se centra la RangeCalendar vista. Si necesita controlarlo, debe usar focusedValue utilería. Puede establecer el valor de enfoque inicial para un componente no controlado con un accesorio defaultFocusedValue opcional.

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

§Zona horaria

timeZone es la propiedad para establecer la zona horaria del valor de la entrada. Más información sobre las zonas horarias

§Propiedades