Descripción general del componente del selector de fecha de React

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 fecha 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 de React también admite un modo de cuadro de diálogo para la selección solo del calendario, el formato de fecha personalizable y la configuración regional y la integración de validación.

[!NOTE] The IgrDatePicker is a brand new component from Ignite UI for React version 18.7.0. The old IgrDatePicker prior to this version has been renamed to XDatePicker 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

Luego tendrás que importar elIgrDatePicker CSS necesario y registrar su módulo, así:

import { IgrDatePicker } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Para una introducción completa al Ignite UI for React, lee el tema Empezar.

Using the React Date Picker Component

Display Date Picker

To instantiate a IgrDatePicker in its default dropdown state, use the following code:

<IgrDatePicker></IgrDatePicker>

Options

The IgrDatePicker can be bound to a date.

const date = new Date();

<IgrDatePicker value={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

The calendar and clear icon could be templated by using the calendar and clear slots:

<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

The picker's action buttons can be templated using the actions slot:

<IgrDatePicker>
    <IgrButton
        slot='actions'
        onClick={() => datePickerRef.current.showWeekNumbers = true}>
        <span>Show Week Numbers</span>
    </IgrButton>
</IgrDatePicker>

The IgrDatePicker has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the 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` / `CMD` + `←`	Ir al principio de la sección de fecha/hora: la actual o la izquierda
`CTRL` / `CMD` + `→`	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` / `CMD` +`;`	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

The IgrDatePicker also supports a dialog mode:

<IgrDatePicker mode="dialog"></IgrDatePicker>

Display and input format

inputFormat and displayFormat are properties which can be set to make the picker's editor follow a specified format. The inputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.

A good thing to note is that the Date Picker Component will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

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.

More information about these can be found in the IgrDateTimeInput format section.

Increment and decrement

The IgrDatePicker exposes stepUp and stepDown methods. Both of which come from the IgrDateTimeInput and can be used for incrementing and decrementing a specific DatePart of the currently set date.

<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

The IgrDatePicker could be used in a form element, the component's min and max properties act as form validators.

In forms, we can handle the change event of the component and update the value of the label.

Calendar Specific settings

The IgrDatePicker can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include visibleMonths which allows more than one calendar to be displayed when the picker expands, weekStart which determines the starting day of the week, showWeekNumbers which shows the number for each week in the year and more.

Internationalization

The localization of the IgrDatePicker can be controlled through its locale input.

Here is how a IgrDatePicker with Japanese locale definition would look like:

<IgrDatePicker locale="ja-JP"></IgrDatePicker>

Styling

The IgrDatePicker component derives from the IgrInput and IgrCalendar component, so it exposes all available CSS parts. See Input Styling and Calendar Styling for reference.

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}