Descripción general del componente React selector de fecha
El selector de fecha Ignite UI for React es un componente rico en funciones que se utiliza para introducir una fecha a través de la entrada manual de texto o elegir valores de fecha en un cuadro de diálogo de calendario que aparece. Ligero y fácil de usar, el selector de fechas permite a los usuarios navegar a una fecha deseada con varias opciones de visualización: mes, año y década. También admite propiedades de validación comunes, como restricciones de fecha mínima y máxima y campos obligatorios.
El componente Selector de fecha Ignite UI for React permite a los usuarios elegir una sola fecha a través de un menú desplegable de calendario de vista mensual o un campo de entrada editable. El selector de fecha React también admite un modo de diálogo para la selección solo del calendario, la integración de validación y formato de fecha personalizable y localizable.
[!NOTE] The
IgrDatePicker
is a brand new component from Ignite UI for React version 18.7.0. The oldIgrDatePicker
prior to this version has been renamed toXDatePicker
and its respective documentation page can be found under "Deprecated Components"
React Date Picker Example
A continuación, puede ver un ejemplo que demuestra cómo funciona el selector de fechas cuando los usuarios pueden elegir una fecha a través de una entrada de texto manual y hacer clic en el icono de calendario de la izquierda para navegar hasta él. Vea cómo renderizarlo.
Getting Started with React Date Picker
En primer lugar, debe instalar el Ignite UI for React ejecutando el siguiente comando:
npm install igniteui-react
A continuación, tendrás que importar el IgrDatePicker
CSS necesario y registrar su módulo, de la siguiente manera:
import { IgrDatePicker, IgrDatePickerModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrDatePickerModule.register();
Para obtener una introducción completa a Ignite UI for React, lea el tema Introducción.
Using the React Date Picker Component
Display Date Picker
Para crear una instancia de a IgrDatePicker
en su estado predeterminado dropdown
, use el código siguiente:
<IgrDatePicker></IgrDatePicker>
Options
El IgrDatePicker
se puede vincular a a date
.
const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent;
const date = new Date();
DatePicker.value = date;
datePickerRef.current.value = new Date();
Projecting components
Con las ranuras de prefijo y sufijo podemos agregar diferentes contenidos antes y después del contenido principal de la entrada.
<IgrDatePicker>
<IgrIcon
slot="suffix"
name="arrow_upward"
collection="material"
class="small"
onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
</IgrIcon>
</IgrDatePicker>
El fragmento anterior agregará un icono adicional al final de la entrada, justo después del icono de borrado predeterminado. Sin embargo, esto no eliminará el icono de alternancia predeterminado, ya que los prefijos y sufijos se pueden apilar uno tras otro.
Personalización de los iconos de alternar y borrar
El calendario y el icono de borrado se pueden crear como plantilla mediante las calendar
ranuras y clear
:
<IgrDatePicker>
<IgrIcon slot="calendar" name="calendar" collection="material" class="small"></IgrIcon>
<IgrIcon slot="clear" name="delete" collection="material" class="small"></IgrIcon>
</IgrDatePicker>
Botones de acción personalizados
Los botones de acción del selector se pueden modelar usando la actions
ranura:
<IgrDatePicker>
<IgrButton
slot='actions'
onClick={() => datePickerRef.current.showWeekNumbers = true}>
<span>Show Week Numbers</span>
</IgrButton>
</IgrDatePicker>
Keyboard Navigation
Tiene IgrDatePicker
una navegación intuitiva por el teclado que facilita el incremento, la disminución o el salto a través de diferentes partes de fecha, entre otras, sin tener que tocar el mouse.
Llaves | Descripción |
---|---|
← | Mover un personaje al principio |
→ | Mover un personaje hasta el final. |
Hogar | Ir al principio |
Fin | Mover hasta el final |
Ctrl / Comando + ← | Ir al principio de la sección de fecha/hora: la actual o la izquierda |
Ctrl / Comando + → | Ir al final de la sección de fecha/hora: actual en o a la derecha |
Centrarse en una parte de fecha/hora + ↓ | Disminuye una parte de fecha/hora |
Centrarse en una parte de fecha/hora + ↑ | Incrementa una parte de fecha/hora |
Ctrl / Comando +; | Establece la fecha/hora actual como valor del editor |
Esc | Cierra la ventana emergente del calendario y enfoca el campo de entrada. |
Examples
Dialog Mode
También IgrDatePicker
admite un dialog
modo:
<IgrDatePicker mode="dialog"></IgrDatePicker>
Display and input format
inputFormat
y displayFormat
son propiedades que se pueden establecer para hacer que el editor del selector siga un formato especificado. Se inputFormat
basa en la configuración regional, por lo que si no se proporciona ninguno, el selector será el predeterminado utilizado por el navegador.
Una buena cosa a tener en cuenta es que el componente del selector de fecha siempre agregará un cero a la izquierda en las date
partes y month
si se proporcionaron en un formato que no lo tiene, por ejemplo d/M/yy
, se convierte dd/MM/yy
en . Esto solo se aplica durante la edición.
displayFormat
is used to format the picker's input when it is not focused. If no displayFormat
is provided, the picker will use the inputFormat
as its displayFormat
.
Puede encontrar más información sobre estos en la sección de IgrDateTimeInput
formato.
Increment and decrement
Las IgrDatePicker
exposiciones stepUp
y stepDown
los métodos. Ambos provienen de la IgrDateTimeInput
y se pueden usar para incrementar y disminuir un específico DatePart
de la fecha establecida actualmente.
<IgrDatePicker>
<IgrIcon
slot="prefix"
name="arrow_upward"
collection="material"
onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
</IgrIcon>
<IgrIcon
slot="suffix"
name="arrow_downward"
collection="material"
onClick={() => datePickerRef.current.stepDown(DatePart.Month)}>
</IgrIcon>
</IgrDatePicker>
In Forms
Se IgrDatePicker
puede utilizar en un elemento de formulario, el componente y max
las propiedades actúan como validadores de min
formulario.
En formularios, podemos manejar el change
evento del componente y actualizar el valor de la etiqueta.
Calendar Specific settings
Puede IgrDatePicker
modificar algunas de las configuraciones del calendario a través de las propiedades que expone el selector de fechas. Algunos de estos incluyen visibleMonths
que permite que se muestre más de un calendario cuando el selector se expande, weekStart
que determina el día de inicio de la semana, showWeekNumbers
que muestra el número de cada semana del año y más.
Internationalization
La localización de la IgrDatePicker
se puede controlar a través de su locale
entrada.
Así es como se vería una IgrDatePicker
definición de configuración regional japonesa:
<IgrDatePicker locale="ja-JP"></IgrDatePicker>
Styling
El IgrDatePicker
componente se deriva del IgrInput
componente and IgrCalendar
, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada y Estilo de calendario para obtener referencia.