Descripción general del componente del selector de fecha de Web Components

    El selector de fecha Ignite UI for Web Components 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 Web Components 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 Web Components 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 IgcDatePickerComponent is a brand new component from Ignite UI for Web Components version 5.0.0. The old IgcDatePickerComponent prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"

    Web Components 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 Web Components Date Picker

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

    import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);

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

    Using the Web Components Date Picker Component

    Display Date Picker

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

    <igc-date-picker>
    <p slot="helper-text">Date</p>
</igc-date-picker>

    Options

    The IgcDatePickerComponent can be bound to a date or a string.

    const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent;
const date = new Date();

DatePicker.value = date;

    Si una cadena está enlazada al selector, debe estar en el formato ISO 8601:

    <igc-date-picker value="2000-01-01"></igc-date-picker>

    Projecting components

    Con las ranuras de prefijo y sufijo podemos agregar diferentes contenidos antes y después del contenido principal de la entrada.

    <igc-date-picker id="DatePicker">
    <igc-icon slot="suffix" name="arrow_upward" collection="material" class="small" onclick="DatePicker.stepUp()"></igc-icon>
</igc-date-picker>

    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:

    <igc-date-picker id="DatePicker">
    <igc-icon slot="calendar" name="calendar" collection="material" class="small"></igc-icon>
    <igc-icon slot="clear" name="delete" collection="material" class="small"></igc-icon>
</igc-date-picker>

    Botones de acción personalizados

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

    <igc-date-picker id="DatePicker">
    <igc-button slot="actions" onclick="DatePicker.showWeekNumbers = true">Show Week Numbers</igc-button>
</igc-date-picker>

    Keyboard Navigation

    The IgcDatePickerComponent 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 IgcDatePickerComponent also supports a dialog mode:

    <igc-date-picker id="DatePicker" mode="dialog">
</igc-date-picker>

    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 IgcDateTimeInputComponent format section.

    Increment and decrement

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

    <igc-date-picker id="DatePicker">
    <igc-icon slot="prefix" name="arrow_upward" collection="material" onclick="DatePicker.stepUp()"></igc-icon>
    <igc-icon slot="suffix" name="arrow_downward" collection="material" onclick="DatePicker.stepDown()"></igc-icon>
</igc-date-picker>

    In Forms

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

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

    Calendar Specific settings

    The IgcDatePickerComponent 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 IgcDatePickerComponent can be controlled through its locale input.

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

    <igc-date-picker locale="ja-JP">
</igc-date-picker>

    Styling

    The IgcDatePickerComponent component derives from the IgcInputComponent and IgcCalendarComponent 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);
}

    API References

    Additional Resources