Descripción general del selector de fechas Blazor
El componente Selector de fecha permite a los usuarios utilizar una interfaz de usuario de calendario desplegable que permite la selección intuitiva de un día, mes y año. Esto puede resultar ú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 rango de fechas.
Blazor Date Picker Example
Este ejemplo demuestra cómo crear IgbDatePicker con la opción de seleccionar una fecha única.
Component Modules
El componente Selector de fecha requiere que se registren los siguientes módulos:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDatePickerModule));
Usage
El componente del editor Blazor Date Picker consta de tres partes predeterminadas: el área de texto, un botón desplegable de calendario y un botón de borrar. Estas áreas se describen a continuación:
Área de texto: muestra la fecha seleccionada, almacenada en la propiedad
Valuedel editor.Calendario: Al hacer clic en el botón de calendario, se abrirá el menú desplegable del calendario del Selector de fechas. El calendario se abrirá para mostrar el mes del
Valueseleccionado actualmente, si lo hay. Si no se especifica unValue, 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 año que incrementarán y disminuirán cronológicamente el mes mostrado.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 de fecha se puede escribir y modificar cambiando esta propiedad a verdadero. |
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 elDateFormat 's DateLong yFormatString están configurados entonces elDateFormat es ignorado. |
Label |
cadena | Muestra texto personalizado encima de la fecha en la esquina superior izquierda del Selector de fecha. |
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 verdadero, el botón borrar está directamente a la izquierda del botón del calendario, visualizado por una X. Cuando se hace clic, se borrará elValue del selector de fecha. La visibilidad del botón borrar 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 fechas. 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 fecha 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 fecha y lo selecciona en el calendario desplegable. |
Los usuarios también pueden personalizar la fuente del Selector de fecha utilizando las diversas propiedades de texto del control. Son: TextColor, TextFontFamily, TextFontSize, TextFontStyle y TextFontWeight.
Edición
El siguiente ejemplo demuestra cómo habilitar la edición en IgbDatePicker.
Date Limits
El siguiente ejemplo demuestra cómo restringir fechas seleccionadas en IgbDatePicker.
Date Formats
El siguiente ejemplo demuestra cómo aplicar una fecha larga en IgbDatePicker.
Date Ranges
El siguiente ejemplo demuestra cómo combinar varios controles IgbDatePicker.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
IgbDatePickerIconColorAllowTextInputDateFormatFirstDayOfWeekFormatStringLabelMinDateMaxDatePlaceholderShowClearButtonShowTodayButtonShowWeekNumbersFirstWeekOfYearOpenOnFocusValueTextColorTextFontFamilyTextFontSizeTextFontStyleTextFontWeight