Descripción general del componente Selector de fecha Blazor
La Ignite UI for Blazor es un componente con muchas funciones que se utiliza para ingresar una fecha mediante la entrada manual de texto o para elegir valores de fecha en un cuadro de diálogo de calendario que aparece. Ligero y fácil de usar, el selector de fechas permite a los usuarios navegar hasta la 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 Blazor permite a los usuarios elegir una fecha única a través de un menú desplegable del calendario con vista mensual o un campo de entrada editable. El Selector de fecha Blazor también admite un modo de diálogo para la selección solo desde el calendario, un formato de fecha personalizable y con reconocimiento de la configuración regional, y una integración de validación.
Note
The IgbDatePicker is a brand new component from Ignite UI for Blazor version . The old IgbDatePicker prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"
Blazor Date Picker Example
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.
Getting Started with Blazor Date Picker
Para empezar con elIgbDatePicker componente, primero necesitamos registrar su módulo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbDatePicker componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.
Using the Blazor Date Picker Component
Display Date Picker
Para instanciar aIgbDatePicker en su estado predeterminadodropdown, utiliza el siguiente código:
<IgbDatePicker @ref="DatePicker"></IgbDatePicker>
Options
ElIgbDatePicker puede estar vinculado a un.date
<IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
</IgbDatePicker>
@code {
public DateTime SelectedDate { get; set; }
public IgbDatePicker DatePicker { get; set; }
protected override void OnInitialized()
{
this.SelectedDate = DateTime.Today;
}
}
Projecting components
Con las ranuras de prefijo y sufijo podemos agregar diferentes contenidos antes y después del contenido principal de la entrada.
<IgbDatePicker @ref="DatePicker">
<IgbIcon
Slot="suffix"
IconName="arrow_upward"
Collection="bootstrap"
Class="small"
@onclick="() => DatePicker.StepUp(DatePart.Month)">
</IgbIcon>
</IgbDatePicker>
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 icono del calendario y del claro podrían configurarse usando lascalendar ranuras yclear:
<IgbDatePicker>
<IgbIcon Slot="calendar" IconName="calendar" Collection="material" Class="small"></IgbIcon>
<IgbIcon Slot="clear" IconName="delete" Collection="material" Class="small"></IgbIcon>
</IgbDatePicker>
Botones de acción personalizados
Los botones de acción del selector pueden plantarse usando laactions ranura:
<IgbDatePicker>
<IgbButton Slot="actions" @onclick="() => DatePicker.ShowWeekNumbers = true">Show Week Numbers</IgbButton>
</IgbDatePicker>
Keyboard Navigation
TieneIgbDatePicker una navegación de teclado intuitiva que facilita incrementar, decrementar o saltar entre diferentes DateParts, entre otros, sin tener que tocar el ratón.
| Llaves | Descripción |
|---|---|
| ← | Mover un personaje al principio |
| → | Mover un personaje hasta el final. |
| HOGAR | Ir al principio |
| FIN | Mover hasta el final |
| CTRL / CMD + ← | Ir al principio de la sección de fecha/hora: la actual o la izquierda |
| CTRL / CMD + → | 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 / CMD +; | Establece la fecha/hora actual como valor del editor |
| ESC | Cierra la ventana emergente del calendario y enfoca el campo de entrada. |
Examples
Dialog Mode
TambiénIgbDatePicker soporta undialog modo:
<IgbDatePicker Mode="PickerMode.Dialog"></IgbDatePicker>
Display and input format
InputFormatyDisplayFormat son propiedades que pueden configurarse para que el editor del selector siga un formato especificado. EstáInputFormat basado en la localización, así que si no se proporciona ninguno, el selector usará por defecto el que usa el navegador.
Algo bueno a tener en cuenta es que el componente Selector de Fecha siempre añadirá un cero inicial en lasdate porciones ymonth si se han proporcionado en un formato que no lo tiene, por ejemplo, .d/M/yy becomesdd/MM/yy. Esto solo se aplica durante la edición.
DisplayFormatse utiliza para formatear la entrada del selector cuando no está enfocada. Si noDisplayFormat se proporciona nada, el selector usará elInputFormat asitDisplayFormat.
Más información sobre estos se puede encontrar en laIgbDateTimeInput sección de formato.
Increment and decrement
LasIgbDatePicker denunciasStepUp yStepDown los métodos. Ambos provienen de yIgbDateTimeInput pueden usarse para incrementar y decrementar un específicoDatePart de la fecha actualmente establecida.
<IgbDatePicker @ref="DatePicker">
<IgbIcon
Slot="prefix"
IconName="arrow_upward"
Collection="material"
@onclick="() => DatePicker.StepUp(DatePart.Month)">
</IgbIcon>
<IgbIcon
Slot="suffix"
IconName="arrow_downward"
Collection="material"
@onclick="() => DatePicker.StepDown(DatePart.Month)">
</IgbIcon>
</IgbDatePicker>
In Forms
PodríanIgbDatePicker usarse en un elemento de forma, los componentesMin yMax propiedades actúan como validadores de formularios.
En formularios, podemos gestionar elChange evento del componente y actualizar el valor de la etiqueta.
Calendar Specific settings
PuedenIgbDatePicker modificar algunos ajustes del calendario mediante las propiedades que expone el selector de fechas. Algunas de ellas incluyenVisibleMonths que permite mostrar más de un calendario cuando el selector expande,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.
Internationalization
La localización delIgbDatePicker puede controlarse mediante suLocale entrada.
Así sería unaIgbDatePicker definición de local japonesa:
<IgbDatePicker Locale="ja-JP"></IgbDatePicker>
Styling
ElIgbDatePicker componente deriva delIgbInput componente andIgbCalendar, por lo que expone todas las partes CSS disponibles. Consulta Estilo de entrada y Estilo de calendario para referencia.
igc-date-picker::part(header) {
background-color: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
color: var(--ig-info-300);
background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
color: var(--ig-secondary-500-contrast);
background-color: var(--ig-secondary-500);
}