Descripción general de la entrada de fecha y hora Blazor
La Ignite UI for Blazor permite al usuario configurar y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar partes de fecha y hora utilizando una entrada enmascarada editable. Además, se puede especificar el formato de entrada y visualización deseado, así como los valores mínimo y máximo para utilizar la validación.
Usage
Antes de utilizar IgbDateTimeInput
, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbDateTimeInput
componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Value binding
La forma más fácil de establecer el valor del IgbDateTimeInput
componente es pasar un objeto Date a la Value
propiedad:
<IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Keyboard Navigation
IgbDateTimeInput
tiene una navegación intuitiva con el teclado que facilita incrementar, disminuir o saltar a través de diferentes DateParts
entre otras, sin tener que tocar el mouse.
Llaves | Descripción |
---|---|
← | Mover un personaje al principio |
→ | Mover un personaje hasta el final. |
Hogar | Ir al principio |
Fin | Mover hasta el final |
Ctrl / Comando + ← | Ir al principio de la sección de fecha/hora: la actual o la izquierda |
Ctrl / Comando + → | 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 / Comando +; | Establece la fecha/hora actual como valor del editor |
Setting formats
IgbDateTimeInput
admite diferentes formatos de visualización y entrada.
Utiliza Intl.DateTimeFormat, lo que le permite admitir opciones de formato predefinidas, como long
y,y short
medium
full
. Además, también puede aceptar una cadena personalizada construida a partir de caracteres admitidos, como dd-MM-yy
. Además, si no se proporciona ninguno DisplayFormat
, el componente usará el InputFormat
como tal.
Input Format
La siguiente tabla muestra los formatos que son compatibles con el componente InputFormat
:
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áselo como una cadena a the IgbDateTimeInput
. Esto establecerá tanto el formato de entrada de usuario esperado como el mask
. Además, el se basa en la InputFormat
configuración regional, por lo que si no se proporciona ninguno, el editor lo hará de dd/MM/yyyy
forma predeterminada.
<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
Puede especificar Min
y Max
propiedades para restringir la entrada y controlar la validez del componente. Al igual que la Value
propiedad, pueden ser de tipo string
.
<IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Si todo salió bien, el componente no será invalid
si el valor es mayor o menor que las fechas indicadas. Mira el siguiente ejemplo:
Step up/down
El IgbDateTimeInput
público StepUp
expone y StepDown
los métodos. Aumentan o disminuyen una fecha y hora específicas DatePart
establecidas actualmente y se pueden usar de dos maneras.
En el primer escenario, si no se pasa ningún DatePart específico al método, un DatePart predeterminado se incrementará o disminuirá, en función de la implementación del componente interno InputFormat
y especificado. En el segundo escenario, puede especificar explícitamente qué DatePart se va a manipular, ya que puede adaptarse a diferentes requisitos. Además, ambos métodos aceptan un parámetro opcional delta
de tipo number que se puede usar para establecer el paso stepUp/stepDown.
Además, SpinDelta
es una propiedad que se puede usar para aplicar un delta diferente a cada segmento de fecha y hora. Se aplicará al girar con el teclado, la rueda del ratón o con los StepUp
métodos and StepDown
, siempre y cuando no tengan el parámetro delta proporcionado ya que tendrá prioridad sobre SpinDelta
.
Pruébelo en el siguiente ejemplo:
Styling
El componente IgbDateTimeInput
deriva del componente IgbInput
, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada como referencia.
API References
IgbInput
IgbMaskInput
IgbIcon
DateParts
IgbDateTimeInput