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.
[!WARNING] The
XDatePickercomponent is deprecated from version of Ignite UI for Blazor. For the latest supported Ignite UI for Blazor Date Picker component refer to its respective page under "Scheduling".
Blazor XDate Picker Example
Este ejemplo demuestra cómo crearXDatePicker con la opción de seleccionar una sola fecha.
Component Modules
El componente XDate Picker requiere que se registren los siguientes módulos:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbXDatePickerModule));
Usage
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: Esto muestra la fecha seleccionada, almacenada en la
Valuepropiedad del editor.Calendario: Al hacer clic en el botón de calendario se abrirá el desplegable del selector de XDate. El calendario se abrirá para mostrar el mes del seleccionado
Valueactualmente, si es que hay alguno. Si no se especifica aValue, el calendario mostrará el mes correspondiente a la fecha actual. El mes que aparece arriba se puede hacer clic para mostrar una lista de meses, y lo mismo aplica para el año. También hay botones de flecha a la izquierda y derecha de la visualización del mes y el año que incrementarán y decrementará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 puede escribirse y modificarse cambiando 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 XDate utilizando las distintas propiedades de texto del control. Son:TextColor,TextFontFamily,TextFontSize,TextFontStyle, yTextFontWeight.
Edición
El siguiente ejemplo demuestra cómo habilitar la edición en elXDatePicker.
Date Limits
El siguiente ejemplo demuestra cómo restringir fechas seleccionadas en elXDatePicker.
Date Formats
El siguiente ejemplo demuestra cómo aplicar una cita larga en elXDatePicker.
Date Ranges
El siguiente ejemplo demuestra cómo combinar múltiplesXDatePicker controles.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
XDatePickerIconColorAllowTextInputDateFormatFirstDayOfWeekFormatStringLabelMinDateMaxDatePlaceholderShowClearButtonShowTodayButtonShowWeekNumbersFirstWeekOfYearOpenOnFocusValueTextColorTextFontFamilyTextFontSizeTextFontStyleTextFontWeight