Blazor Descripción general de la entrada de fecha y hora
La entrada de fecha y hora Ignite UI for Blazor permite al usuario establecer y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar las partes de fecha y hora mediante una entrada enmascarada editable. Además, se puede especificar el formato de visualización y entrada deseado, así como los valores mínimos y máximos para utilizar la validación.
Usage
Antes de usarlosIgbDateTimeInput, debes registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbDateTimeInput 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" />
Value binding
La forma más sencilla de establecer el valor delIgbDateTimeInput componente es pasando un objeto Date a laValue propiedad:
<IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Keyboard Navigation
TieneIgbDateTimeInput una navegación intuitiva con el teclado que facilita incrementar, disminuir o saltar entre diferentesDateParts 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 |
Setting formats
SoportaIgbDateTimeInput diferentes formatos de pantalla y entrada.
Utiliza Intl.DateTimeFormat, que le permite soportar opciones de formato predefinidas, comolong andshort,medium andfull. Además, también puede aceptar una cadena personalizada construida a partir de caracteres soportados, comodd-MM-yy por ejemplo. Además, si noDisplayFormat se proporciona nada, el componente usará elInputFormat tal.
Input Format
La tabla que sigue muestra los formatos soportados por losInputFormat componentes:
| Formato | Descripción |
|---|---|
d |
La fecha será forzada con un cero a la izquierda durante la edición. |
dd |
Fecha con un cero inicial establecido explícitamente. |
M |
Mes, será forzado con un cero a la izquierda durante la edición. |
MM |
Mes con un cero inicial establecido explícitamente. |
yy |
Formato de año corto. |
yyyy |
Formato de año completo. |
h |
Las horas en formato de 12 horas se forzarán con un cero a la izquierda durante la edición. |
hh |
Horas en formato de 12 horas con un cero inicial establecido explícitamente. |
H |
Las horas en formato de 24 horas se verán forzadas con un cero a la izquierda durante la edición. |
HH |
Horas en formato de 24 horas, con un cero inicial establecido explícitamente. |
m |
Las actas, serán coaccionadas con un cero a la izquierda durante la edición. |
mm |
Minutos con un cero inicial establecido explícitamente. |
tt |
Sección AM/PM para formato de 12 horas. |
Para establecer un formato de entrada específico, pásalo como una cadena a elIgbDateTimeInput. Esto establecerá tanto el formato de entrada esperado por el usuario como elmask. Además, estáInputFormat basado en localización, así que si no se proporciona ninguno, el editor lodd/MM/yyyy aplicará por defecto.
<IgbDateTimeInput @ref="DateTimeInputRef" InputFormat="dd-MM-yy" DisplayFormat="medium">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
Display format
La entrada de fecha y hora expone formatos predefinidos para mostrar la fecha/hora de varias maneras. Todos los ejemplos siguientes se proporcionan en la configuración regional en-US.
| Opción | Ejemplo |
|---|---|
short |
17/7/22, 00:00 |
medium |
17 de julio de 2022, 00:00:00 |
long |
17 de julio de 2022 a las 00:00:00 GMT+3 |
full |
Domingo 17 de julio de 2022 a las 12:00:00 a. m., hora de verano de Europa del Este |
shortDate |
7/17/22 |
mediumDate |
17 de julio de 2022 |
longDate |
17 de julio de 2022 |
fullDate |
domingo, 17 de julio de 2022 |
shortTime |
12:00 AM |
mediumTime |
12:00:00 AM |
longTime |
12:00:00 GMT+3 |
fullTime |
12:00:00 a.m., hora de verano de Europa del Este |
Además, los usuarios pueden construir una cadena displayFormat utilizando los símbolos admitidos que se describen en la siguiente tabla.
| Tipo | Formato | Descripción | Ejemplo |
|---|---|---|---|
| Día | d |
Dígitos mínimos. | 7, 17 |
dd |
Cero acolchado. | 07, 17 | |
| Mes | M |
Dígitos mínimos. | 3, 10 |
MM |
Cero acolchado. | 03, 10 | |
MMM |
Abreviado | Oct | |
MMMM |
Ancho | Octubre | |
MMMMM |
Angosto | O | |
| Año | y |
Numérico | 2022 |
yy |
Dos dígitos | 22 | |
yyy |
Numérico | 2022 | |
yyyy |
Numérico | 2022 | |
| Hora 1-12 | h |
Dígitos mínimos | 1, 12 |
hh |
Cero acolchado | 01, 12 | |
| Hora 1-24 | H |
Dígitos mínimos | 1, 23 |
HH |
Cero acolchado | 01, 23 | |
| Minuto | m |
Dígitos mínimos | 1, 59 |
mm |
Cero acolchado | 01, 59 | |
| Segundo | s |
Dígitos mínimos | 1, 59 |
ss |
Cero acolchado | 01, 59 | |
| Periodo de tiempo | t |
Abreviado | AM PM |
tt |
Abreviado | AM PM | |
ttt |
Corto | mediodía | |
tttt |
Largo | mediodía | |
ttttt |
Angosto | norte |
[!Note] Many locales use the same time period string, irrespective of the format specified. Also, it has an effect only if a 12-hour clock is used.
Min/max value
Puedes especificarMin propiedades yMax para restringir la entrada y controlar la validez del componente. Al igual que laValue propiedad, pueden ser de su tipostring.
<IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Si todo ha ido bien, el componente seráinvalid si el valor es mayor o menor que las fechas indicadas. Echa un vistazo al ejemplo a continuación:
Step up/down
ExponeIgbDateTimeInput al públicoStepUp yStepDown a los métodos. Incrementan o disminuyen una fecha y horaDatePart específicas y pueden usarse de varias maneras.
En el primer escenario, si no se pasa ningún DatePart específico al método, un DatePart por defecto incrementará o decrementará, en función de la implementación del componente especificadoInputFormat y del componente interno. En el segundo escenario, puedes especificar explícitamente qué DatePart manipular, ya que puede adaptarse a diferentes requisitos. Además, ambos métodos aceptan un parámetro opcionaldelta de número de tipo que puede usarse para establecer el paso de paso hacia arriba/abajo.
Además,SpinDelta es una propiedad que puede usarse para aplicar un delta diferente a cada segmento de fecha. Se aplicará al girar con el teclado, la rueda del ratón o con losStepUp métodos andStepDown, siempre que no tengan el parámetro delta proporcionado, ya que tendrá prioridadSpinDelta.
Pruébelo en el siguiente ejemplo:
Styling
ElIgbDateTimeInput componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas:
| Nombre | Descripción |
|---|---|
container |
El contenedor principal que contiene todos los elementos de entrada principales. |
input |
El elemento de entrada nativo. |
label |
El elemento de etiqueta nativo. |
prefix |
El contenedor de prefijo. |
suffix |
El contenedor del sufijo. |
helper-text |
El contenedor de texto auxiliar. |
igc-date-time-input::part(input) {
background-color: var(--ig-primary-100);
border-color: var(--ig-secondary-500);
box-shadow: none;
}
igc-date-time-input::part(prefix),
igc-date-time-input::part(suffix) {
color: var(--ig-primary-600-contrast);
background-color: var(--ig-primary-500);
border-color: var(--ig-secondary-500);
}