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.
EXAMPLE
MODULES
RAZOR
using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesusing BlazorClientApp;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddIgniteUIBlazor(
typeof(IgbIconModule),
typeof(IgbDateTimeInputModule),
typeof(IgbRadioGroupModule),
typeof(IgbRadioModule),
typeof(IgbRatingModule),
typeof(IgbAccordionModule),
typeof(IgbExpansionPanelModule),
typeof(IgbCheckboxModule),
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();cs
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Antes de utilizar IgbDateTimeInput, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbDateTimeInput. Lo siguiente debe colocarse en el archivo wwwroot/index.html en un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml en un proyecto Blazor Server:
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
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
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.
Formato de entrada
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.
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
EXAMPLE
MODULES
RAZOR
using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesusing BlazorClientApp;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddIgniteUIBlazor(
typeof(IgbIconModule),
typeof(IgbDateTimeInputModule),
typeof(IgbRadioGroupModule),
typeof(IgbRadioModule),
typeof(IgbRatingModule),
typeof(IgbAccordionModule),
typeof(IgbExpansionPanelModule),
typeof(IgbCheckboxModule),
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();cs
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
Muchas configuraciones regionales utilizan la misma cadena de período de tiempo, independientemente del formato especificado. Además, sólo tiene efecto si se utiliza un reloj de 12 horas.
Valor mínimo/máximo
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.
Si todo salió bien, el componente no será invalid si el valor es mayor o menor que las fechas indicadas. Mira el siguiente ejemplo:
EXAMPLE
MODULES
RAZOR
using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesusing BlazorClientApp;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddIgniteUIBlazor(
typeof(IgbIconModule),
typeof(IgbDateTimeInputModule),
typeof(IgbRadioGroupModule),
typeof(IgbRadioModule),
typeof(IgbRatingModule),
typeof(IgbAccordionModule),
typeof(IgbExpansionPanelModule),
typeof(IgbCheckboxModule),
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();cs
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:
EXAMPLE
MODULES
RAZOR
using System;
using System.Net.Http;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesusing BlazorClientApp;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddIgniteUIBlazor(
typeof(IgbIconModule),
typeof(IgbDateTimeInputModule),
typeof(IgbRadioGroupModule),
typeof(IgbRadioModule),
typeof(IgbRatingModule),
typeof(IgbAccordionModule),
typeof(IgbExpansionPanelModule),
typeof(IgbCheckboxModule),
typeof(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();cs