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.

    IgcDatePickerComponent es un componente completamente nuevo de Ignite UI for Web Components versión 5.0.0. Se ha cambiado el nombre del antiguo IgcDatePickerComponent anterior a esta versión a XDatePicker y su respectiva página de documentación se puede encontrar en "Componentes en desuso"

    Ejemplo de selector de fecha Web Components

    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.

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Introducción a Web Components selector de fechas

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

    npm install igniteui-webcomponents
    cmd

    A continuación, tendrás que importar el IgcDatePickerComponent CSS necesario y registrar su módulo, de la siguiente manera:

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

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    Ignite UI for Web Components | CTA Banner

    Uso del componente Selector de fecha Web Components

    Selector de fecha de visualización

    Para crear una instancia de a IgcDatePickerComponent en su estado predeterminado dropdown, use el código siguiente:

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

    Opciones

    El IgcDatePickerComponent puede estar vinculado a a date o a string.

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

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

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

    Componentes proyectantes

    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>
    html

    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:

    <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>
    html

    Botones de acción personalizados

    Los botones de acción del selector se pueden modelar usando la actions ranura:

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

    Navegación por teclado

    Tiene IgcDatePickerComponent 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.

    Ejemplos

    Modo de diálogo

    También IgcDatePickerComponent admite un dialog modo:

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

    EXAMPLE
    TS
    HTML
    CSS

    Formato de visualización y entrada

    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 IgcDateTimeInputComponent formato.

    EXAMPLE
    TS
    HTML
    CSS

    Incremento y decremento

    Las IgcDatePickerComponent exposiciones stepUp y stepDown los métodos. Ambos provienen de la IgcDateTimeInputComponent y se pueden utilizar para incrementar y disminuir un específico DatePart de la fecha establecida actualmente.

    <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>
    html

    En Formularios

    Se IgcDatePickerComponent 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 igcChange evento del componente y actualizar el valor de la etiqueta.

    EXAMPLE
    TS
    HTML
    CSS

    Configuraciones específicas del calendario

    Puede IgcDatePickerComponent 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 se expande el selector, 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.

    Internacionalización

    La localización de la IgcDatePickerComponent se puede controlar a través de su locale entrada.

    Así es como se vería una IgcDatePickerComponent definición de configuración regional japonesa:

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

    Estilo

    El IgcDatePickerComponent componente se deriva del IgcInputComponent componente and IgcCalendarComponent, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada y Estilo de calendario para obtener referencia.

    EXAMPLE
    TS
    HTML
    DatePickerStyling.css
    index.css

    Referencias de API

    Recursos adicionales