Blazor XDate Picker Overview

    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á obsoleto a partir de la versión de Ignite UI for Blazor. Para conocer el último componente de selector de fechas compatible Ignite UI for Blazor consulte su página correspondiente en "Programación".

    Ejemplo de selector de fechas Blazor 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 Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Módulos de componentes

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
        typeof(IgbXDatePickerModule));
    razor

    Uso

    El componente del editor Blazor 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