Descripción general del selector de XDate de Web Components

    El componente XDate Picker permite a los usuarios utilizar una interfaz de usuario de calendario desplegable que permite la selección intuitiva de un día, un mes y un año. Esto puede ser útil cuando un usuario de la aplicación necesita seleccionar fechas específicas, y se pueden combinar varios editores para crear una interfaz de usuario de intervalo de fechas.

    El componente XDatePicker está en desuso a partir de la versión 5.0.0 de Ignite UI for Web Components. Para obtener el último componente compatible del selector de fechas Ignite UI for Web Components, consulte su página respectiva en "Programación".

    Web Components Ejemplo de selector de XDate

    En este ejemplo se muestra cómo crear XDatePicker con la opción de seleccionar una sola fecha.

    EXAMPLE

    ¿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.

    dependencias

    Al instalar el componente XDate Picker, también se deben instalar los paquetes core y inputs.

    npm install --save igniteui-webcomponents-core
    npm install --save igniteui-webcomponents-inputs
    npm install --save igniteui-webcomponents-layouts
    cmd
    Ignite UI for Web Components | CTA Banner

    Módulos de componentes

    El componente XDate Picker requiere que se registren los siguientes módulos:

    import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs';
    import { ModuleManager } from 'igniteui-webcomponents-core';
    
    ModuleManager.register(IgcXDatePickerModule);
    ts

    Uso

    El componente del editor de Web Components XDate Picker consta de tres partes predeterminadas: el área de texto, un botón desplegable de calendario y un botón de borrado. Estas áreas se describen a continuación:

    • Área de texto: Muestra la fecha seleccionada, almacenada en la Value propiedad del editor.

    • Calendario: Al hacer clic en el botón de calendario, se abrirá el menú desplegable de calendario del Selector de XDate. El calendario se abrirá para mostrar el mes del seleccionado Value actualmente, si lo hay. Si no se especifica a Value, el calendario mostrará el mes correspondiente a la fecha actual. Se puede hacer clic en el mes en la parte superior para mostrar una lista de meses, y lo mismo se aplica al año. También hay botones de flecha a la izquierda y a la derecha de la visualización del mes y el año que incrementarán y disminuirán el mes mostrado cronológicamente.

    • Botón Borrar: El icono 'x' borrará el valor actual.

    Propiedad Tipo Descripción
    IconColor cadena Cambia el color del botón del calendario.
    AllowTextInput booleano El valor del selector xdate se puede escribir y modificar alternando esta propiedad a true.
    DateFormat enumeración El valor predeterminado es DateShort, por ejemplo, 'dd/mm/aaaa'. Cuando se establece en DateLong, la fecha que se muestra en el editor aparecerá como, por ejemplo, miércoles 14 de abril de 2021.
    FirstDayOfWeek enumeración Por defecto el domingo. Se utilizará un día determinado de la semana como primer día en cada fila semanal del calendario, por ejemplo, de lunes a domingo.
    FormatString cadena Cuando se utiliza DateShort, el formato de la fecha se puede configurar, por ejemplo, 'dd/mm/aaaa'. Tenga en cuenta que si esDateFormat DateLong yFormatString están establecidos, seDateFormat ignora.
    Label cadena Muestra texto personalizado encima de la fecha en la esquina superior izquierda del selector de XDate.
    MinDate Fecha y hora Restringe la selección o visualización de fechas anteriores.
    MaxDate Fecha y hora Restringe la selección o visualización de fechas posteriores.
    Placeholder cadena Una cadena personalizada que se mostrará cuando se borre el valor dentro de la parte de edición del calendario.
    ShowClearButton booleano El valor predeterminado es true, el botón de borrar está directamente a la izquierda del botón de calendario, visualizado por una X. Al hacer clic, se borrará elValue selector de XDate. La visibilidad del botón de borrado se puede activar y desactivar.
    ShowTodayButton booleano El día de hoy está directamente debajo de las fechas en las que se abre el calendario. Al hacer clic, seleccionará la fecha actual. La visibilidad del botón de hoy se puede activar y desactivar.
    ShowWeekNumbers booleano Los números de semana se pueden mostrar como un número, a la izquierda de cada fila de fechas, en la parte desplegable del Selector de XDate. La visibilidad del número de semana se puede activar y desactivar.
    FirstWeekOfYear enumeración Configura los números de inicio de semana para todo el año. Se puede configurar en FirstDay, FirstFourDayWeek, FirstFullWeek.
    OpenOnFocus booleano De forma predeterminada, la parte desplegable del selector de XDate se abre con un solo clic, lo que obliga al usuario a hacer clic en el botón del calendario para desplegar el calendario.
    Value fecha Establece el valor del selector de XDate y lo selecciona en el calendario desplegable.

    Los usuarios también pueden personalizar la fuente del selector de XDate mediante las distintas propiedades de texto del control. Ellos son: TextColor, TextFontFamily, TextFontSize, TextFontStyle, y TextFontWeight.

    Edición

    En el ejemplo siguiente se muestra cómo habilitar la edición en el XDatePicker.

    EXAMPLE

    Límites de fecha

    En el ejemplo siguiente se muestra cómo restringir las fechas seleccionadas en el XDatePicker.

    EXAMPLE

    Formatos de fecha

    En el ejemplo siguiente se muestra cómo aplicar una fecha larga en el XDatePicker.

    EXAMPLE

    Rangos de fechas

    En el ejemplo siguiente se muestra cómo combinar varios XDatePicker controles.

    EXAMPLE

    Referencias de API

    La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

    • XDatePicker
    • IconColor
    • AllowTextInput
    • DateFormat
    • FirstDayOfWeek
    • FormatString
    • Label
    • MinDate
    • MaxDate
    • Placeholder
    • ShowClearButton
    • ShowTodayButton
    • ShowWeekNumbers
    • FirstWeekOfYear
    • OpenOnFocus
    • Value
    • TextColor
    • TextFontFamily
    • TextFontSize
    • TextFontStyle
    • TextFontWeight