Date Picker
import {DatePicker} from '@gravity-ui/date-components';
DatePicker es un componente sofisticado, ligero y totalmente personalizable diseñado para proporcionar una funcionalidad intuitiva de selección de fechas en sus aplicaciones React. Creado teniendo en cuenta la experiencia del usuario y la facilidad de integración, se adapta perfectamente a los formularios, modales o cualquier elemento de la interfaz de usuario que requiera la entrada de fecha. 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';
§Apariencia
La apariencia de DatePicker está controlada por size las pin propiedades view y.
§Tamaño
Para controlar el tamaño del DatePicker uso de la size propiedad. El tamaño predeterminado es m.
<DatePicker size="s" />
<DatePicker size="m" />
<DatePicker size="l" />
<DatePicker size="xl" />§Ver
normal- la vista principal de DatePicker (utilizada de forma predeterminada).
<DatePicker />clear- vista DatePicker sin bordes visibles (se puede usar con un envoltorio personalizado)
<DatePicker view="clear" />§Alfiler
La pin propiedad permite controlar la forma de los bordes derecho e izquierdo y, por lo general, se usa para combinar varios controles en una sola unidad.
El valor de la pin propiedad consiste en los nombres de los estilos izquierdo y de borde divididos por un guión, "round-brick" p. ej.
Los estilos de arista son: round (predeterminado) brick y clear. circle
<DatePicker pin="round-brick" />
<DatePicker pin="brick-brick" />
<DatePicker pin="brick-round" />§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. Si ingresas el valor fuera de estos límites, el componente cambia su vista, como en el caso de un estado de validación no válido.
<DatePicker minValue={dateTimeParse('01.01.2024')} placeholder={"minValue: '01.01.2024'"}/>
<DatePicker maxValue={dateTimeParse('01.01.2025')} placeholder={"maxValue: '01.01.2025'"}/>§Estados
§Discapacitado
El estado en el DatePicker que no desea que el usuario pueda interactuar con el componente.
<DatePicker disabled={true} defaultValue={dateTime()} />§Solo lectura
readOnly es un atributo booleano que, cuando se establece en verdadero, hace que el DatePicker componente sea inmutable para el usuario. Esto significa que, si bien la entrada mostrará su valor actual, los usuarios no podrán cambiarla.
<DatePicker readOnly defaultValue={dateTimeParse(new Date())} />§Error
El estado DatePicker en el que desea indicar una entrada de usuario incorrecta. Para cambiar el DatePicker aspecto, utilice la validationState propiedad con el "invalid" valor. Se puede agregar un texto de mensaje opcional a través de la errorMessage propiedad. El texto del mensaje se mostrará en el componente.
<DatePicker errorMessage="Error message" validationState="invalid" />
<DatePicker validationState="invalid" />§Contenido adicional
§Marcador de posición
Este accesorio le permite proporcionar una breve sugerencia que describa el valor esperado del campo de entrada. Esta sugerencia se muestra en el campo de entrada antes de que el usuario introduzca un valor y desaparece al introducir el texto.
<DatePicker placeholder="Placeholder" />§Etiqueta
Le permite colocar la etiqueta en la parte izquierda del campo. La etiqueta no puede ocupar más de la mitad del ancho de todo el espacio de DatePicker.
<DatePicker label="Label" />
<DatePicker label="Very long label with huge amount of symbols" />§Botón Borrar
hasClear es un accesorio booleano que brinda a los usuarios la posibilidad de borrar rápidamente el contenido del campo de entrada.
<DatePicker hasClear />§Formato
El format accesorio es una cadena que define el formato de fecha y hora que el DatePicker componente aceptará y mostrará. Este accesorio determina cómo se presentan visualmente la fecha y la hora al usuario y cómo se espera que se formatee la entrada del usuario. Formatos disponibles
<DatePicker format='LL' />§Zona horaria
timeZone es la propiedad para establecer la zona horaria del valor de la entrada. Más información sobre las zonas horarias
§Personalización
Si desea utilizar un componente de calendario personalizado en su interior, DatePicker puede pasarlo como si fuera children un calendario con accesorios similares.
§Propiedades
| Nombre | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| aria, descrita por | Los controles aria-describedby. Identifica el elemento (o los elementos) que describe el objeto. atributo | string | |
| detalles de aria | Los controles aria-details. Identifica el elemento (o los elementos) que proporcionan una descripción detallada y ampliada del objeto. atributo | string | |
| etiqueta aria | Los controles aria-label. Define un valor de cadena que etiqueta el elemento actual. attribute | string | |
| aria - etiquetada por | Los controles aria-labelledby. Identifica el elemento (o los elementos) que etiquetan el elemento actual. atributo | string | |
| autoFocus | Los controles autofocus. Si el elemento debe centrarse en el atributo render. | boolean | |
| className | El nombre de la clase contenedora del control | string | |
| defaultValue | Establece el valor inicial del componente no controlado. | DateTime | |
| discapacitado | Indica que el usuario no puede interactuar con el control | boolean | false |
| errorMessage | Texto de error | ReactNode | |
| formato | Formato de la fecha cuando se representa en la entrada. Formatos disponibles | string | |
| hasClear | Muestra el icono para borrar el valor del control | boolean | false |
| 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) | |
| etiqueta | Texto de ayuda representado a la izquierda del nodo de entrada | string | |
| maxValue | La fecha máxima permitida que puede seleccionar un usuario. | DateTime | |
| minValue | La fecha mínima permitida que un usuario puede seleccionar. | DateTime | |
| 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) | |
| onKeyDown | Se dispara cuando se pulsa una tecla. Proporciona un evento de teclado como argumento de devolución de llamada | (e: KeyboardEvent<Element>) = nulo)> | |
| onKeyUp | Se dispara cuando se suelta una tecla. Proporciona un evento de teclado como argumento de devolución de llamada | (e: KeyboardEvent<Element>) = nulo)> | |
| onUpdate | Se activa cuando el usuario cambia el valor. Proporciona un nuevo valor como argumento de devolución de llamada | (valor: Fecha/hora| nulo) => nulo | |
| alfiler | Redondeo de esquinas | TextInputPin | 'round-round' |
| marcador de posición | Texto que aparece en el control cuando no tiene ningún valor establecido | string | |
| placeholderValue | Un marcador de fecha que controla los valores predeterminados de cada segmento cuando el usuario interactúa con ellos por primera vez. | DateTime | today's date at midnigh |
| readOnly | Si el valor del componente es inmutable. | boolean | false |
| tamaño | El tamaño del control | "s" "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 | |
| validationState | Estado de validación | "invalid" | |
| valor | El valor del control | DateTime null | |
| vista | La vista del control | "normal" "clear" | "normal" |