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

    Para instanciar aIgcDatePickerComponent en su estado predeterminadodropdown, utiliza el siguiente código:

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

    Options

    PuedenIgcDatePickerComponent estar vinculados a adate o astring.

    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

    El icono del calendario y del claro podrían configurarse usando lascalendar ranuras yclear:

    <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

    Los botones de acción del selector pueden plantarse usando laactions ranura:

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

    Keyboard Navigation

    TieneIgcDatePickerComponent una navegación de teclado intuitiva que facilita incrementar, decrementar o saltar entre diferentes DateParts, entre otros, sin tener que tocar el ratón.

    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

    TambiénIgcDatePickerComponent soporta undialog modo:

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

    Display and input format

    inputFormatydisplayFormat son propiedades que pueden configurarse para que el editor del selector siga un formato especificado. EstáinputFormat basado en la localización, así que si no se proporciona ninguno, el selector usará por defecto el que usa el navegador.

    Algo bueno a tener en cuenta es que el componente Selector de Fecha siempre añadirá un cero inicial en lasdate porciones ymonth si se han proporcionado en un formato que no lo tiene, por ejemplo, .d/M/yy becomesdd/MM/yy. Esto solo se aplica durante la edición.

    displayFormatse utiliza para formatear la entrada del selector cuando no está enfocada. Si nodisplayFormat se proporciona nada, el selector usará elinputFormat asitdisplayFormat.

    Más información sobre estos se puede encontrar en laIgcDateTimeInputComponent sección de formato.

    Increment and decrement

    LasIgcDatePickerComponent denunciasstepUp ystepDown los métodos. Ambos provienen de yIgcDateTimeInputComponent pueden usarse para incrementar y decrementar un específicoDatePart de la fecha actualmente establecida.

    <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

    PodríanIgcDatePickerComponent usarse en un elemento de forma, los componentesmin ymax propiedades actúan como validadores de formularios.

    En formularios, podemos gestionar eligcChange evento del componente y actualizar el valor de la etiqueta.

    Calendar Specific settings

    PuedenIgcDatePickerComponent modificar algunos ajustes del calendario mediante las propiedades que expone el selector de fechas. Algunas de ellas incluyenvisibleMonths que permite mostrar más de un calendario cuando el selector 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 delIgcDatePickerComponent puede controlarse mediante sulocale entrada.

    Así sería unaIgcDatePickerComponent definición de local japonesa:

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

    Styling

    ElIgcDatePickerComponent componente deriva delIgcInputComponent componente andIgcCalendarComponent, por lo que expone todas las partes CSS disponibles. Consulta Estilo de entrada y Estilo de calendario para referencia.

    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