Calendar
import {Calendar} from '@gravity-ui/date-components';
Calendar es un componente de calendario flexible y fácil de usar para aplicaciones React. Permite a los usuarios ver, seleccionar y gestionar las fechas con facilidad. Ideal para la programación de eventos, los sistemas de reservas y cualquier aplicación en la que la selección de fechas sea esencial. 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} from '@gravity-ui/date-utils';
§Tamaño
Para controlar el tamaño del Calendar uso de la size propiedad. El tamaño predeterminado es m.
<Calendar size="m" />
<Calendar size="l" />
<Calendar 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.
<Calendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />§Modo
Define el intervalo de tiempo que Calendar 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 Calendar. 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
<Calendar defaultMode="months"/>§Estados
§Discapacitado
El estado en el Calendar que no desea que el usuario pueda interactuar con el componente.
<Calendar disabled={true} />§Solo lectura
readOnly es un atributo booleano que, cuando se establece en verdadero, hace que el Calendar componente sea inmutable para el usuario. Esto significa que, si bien la entrada mostrará su valor actual, los usuarios no podrán cambiarla.
<Calendar readOnly={true} />§Valor enfocado
Permite seleccionar la fecha en la que se centra la Calendar 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.
<Calendar defaultFocusedValue={dateTimeParse('01.01.2020')} />§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
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| aria, descrita por | El aria-describedby atributo del control | string | |
| detalles de aria | El aria-details atributo del control | string | |
| etiqueta aria | El aria-label atributo del control | string | |
| aria - etiquetada por | El aria-labelledby atributo del control | string | |
| autoFocus | El autofocus atributo del control | boolean | |
| className | El nombre de la clase contenedora del control | string | |
| defaultFocusedValue | La fecha en la que se centra cuando el calendario se monta por primera vez (sin control) | DateTime | |
| defaultMode | Modo inicial para mostrar en el calendario | days years | |
| defaultValue | Establece el valor inicial del componente no controlado. | DateTime | |
| discapacitado | Indica que el usuario no puede interactuar con el control | boolean | false |
| focusedValue | Establezca la vista predeterminada del componente no controlado que incluye este valor | DateTime null | |
| identificación | El id atributo del control | string | |
| isDateUnavailable | Llamada que se solicita para cada fecha del calendario. Si se devuelve verdadero, significa que la fecha no está disponible. | ((date: DateTime) => boolean) | |
| isWeekend | Llamada que se solicita para cada fecha del calendario. Si vuelve a ser cierto, entonces la fecha es fin de semana. | ((date: DateTime) => boolean) | |
| maxValue | La fecha máxima permitida que puede seleccionar un usuario. | DateTime | |
| minValue | La fecha mínima permitida que un usuario puede seleccionar. | DateTime | |
| modo | Define el intervalo de tiempo que Calendar debe mostrarse de forma controlada. | days years | |
| modos | Modos disponibles para el usuario | Parcial<Record<CalendarLayout, boolean>> | {days: true, months: true, quarters: false, years: true } |
| onBlur | Se dispara cuando el control pierde el foco. Proporciona un evento de enfoque como argumento de devolución de llamada | (e: focusEvent<Element, Element> () => vacío) | |
| onFocus | Se dispara cuando el control se enfoca. Proporciona un evento de enfoque como argumento de devolución de llamada | (e: focusEvent<Element, Element> () => vacío) | |
| onFocusUpdate | Se activa cuando cambia la fecha de enfoque del control. | ((date: DateTime) => void) | |
| onUpdate | Se activa cuando se cambia el valor. | ((value: DateTime) => void | |
| onUpdateMode | Se dispara cuando se cambia el modo. | (valor: 'días'| 'meses'| 'trimestre'| «años») => nulo | |
| readOnly | Si el valor del calendario es inmutable. | boolean | false |
| tamaño | El tamaño del control | "m" "xl" | "m" |
| estilo | Establece el estilo en línea del elemento. | CSSProperties | |
| timeZone | Establece la zona horaria. Más información sobre las zonas horarias | string | |
| valor | El valor del control | DateTime null |