Ignite UI for Blazor 사용하면 사용자가 선택한 입력 요소에서 날짜와 시간을 설정하고 편집할 수 있습니다. 사용자는 편집 가능한 마스크된 입력을 사용하여 날짜와 시간 부분을 모두 편집할 수 있습니다. 또한 원하는 표시 및 입력 형식과 최소값 및 최대값을 지정하여 유효성 검사를 활용할 수 있습니다.
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
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
razor
IgbDateTimeInput 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
Intl.DateTimeFormat을 사용하여 and,and short와 medium 같은 long 사전 정의된 형식 옵션을 지원할 수 있습니다 full. 또한 다음과 dd-MM-yy 같이 지원되는 문자로 구성된 사용자 지정 문자열을 허용할 수도 있습니다. 또한 제공되지 않은 DisplayFormat 경우 구성 요소는 그대로 사용합니다 InputFormat.
특정 입력 형식을 설정하려면 문자열 IgbDateTimeInput로 전달합니다. 이렇게 하면 예상되는 사용자 입력 형식과 . mask 추가적으로, is 로 InputFormat 케일 기반이므로, 아무 것도 제공되지 않으면, 에디터는 디폴트로 설정됩니다 dd/MM/yyyy.
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
모든 것이 순조롭게 진행된 경우 값이 지정된 날짜보다 크거나 작으면 구성 요소가 invalid 됩니다. 아래 예를 확인하세요.
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
IgbDateTimeInput public StepUp 및 StepDown 메서드를 노출합니다. 현재 설정된 날짜 및 시간의 특정 DatePart 시간을 증가 또는 감소시키며 몇 가지 방법으로 사용할 수 있습니다.
첫 번째 시나리오에서 특정 DatePart가 메서드에 전달되지 않으면 기본 DatePart는 지정된 InputFormat 구성 요소 구현과 내부 구성 요소 구현에 따라 증가하거나 감소합니다. 두 번째 시나리오에서는 다양한 요구 사항에 적합할 수 있으므로 조작할 DatePart를 명시적으로 지정할 수 있습니다. 또한 두 방법 모두 stepUp/stepDown 단계를 설정하는 데 사용할 수 있는 number 유형의 선택적 delta 매개 변수를 허용합니다.
또한 는 SpinDelta 각 날짜 시간 세그먼트에 다른 델타를 적용하는 데 사용할 수 있는 속성입니다. 키보드, 마우스 휠 또는 StepUp and StepDown 메서드로 회전할 때 delta 매개 변수가 제공되지 SpinDelta 않는 한 적용됩니다.
아래 예에서 시도해 보세요.
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
