Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 149516 | Nov 28,2019 12:40 PM UTC | Dec 3,2019 06:24 PM UTC | Blazor | 3 |
|
Tags: DatePicker |
|
@using Syncfusion.EJ2.Blazor.Calendars
@using System.ComponentModel.DataAnnotations;
@using FluentValidation
<EditForm Model="annotation" OnValidSubmit="SaveCustomer">
<FluentValidator Validator="custVal" />
<h3>Your name</h3>
<EjsDatePicker ID='DatePick' @bind-Value="@annotation.date" Width="250px"></EjsDatePicker>
<ValidationMessage For="@(() => annotation.date)" />
<p><button type="submit">Submit</button></p>
</EditForm>
@code {
private Annotation annotation = new Annotation();
CustomerValidator custVal = new CustomerValidator();
public class CustomerValidator : AbstractValidator<Annotation>
{
public CustomerValidator()
{
RuleFor(customer => customer.date).NotEmpty();
}
}
void SaveCustomer()
{
Console.WriteLine("TODO: Actually do something with the valid data");
}
public class Annotation
{
[Required]
public DateTime? date { get; set; } = null;
[Required]
public Object dateRange { get; set; } = null;
[Required]
public DateTime? startDate { get; set; } = null;
[Required]
public DateTime? EndDate { get; set; } = null;
}
} |
|
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
services.AddValidatorsFromAssemblyContaining<Program>();
} |
public class DocInputDateTime : InputDate { protected override void BuildRenderTree(RenderTreeBuilder builder) { builder.OpenElement(0, "input"); builder.AddMultipleAttributes(2, AdditionalAttributes.ExtractClassAttribute(out object classAttribute)); builder.AddAttribute(2, "type", "date"); builder.AddAttribute(4, "class", $"{EditContext.FieldCssClass(FieldIdentifier)} {classAttribute}"); builder.AddAttribute(4, "value", BindConverter.FormatValue(CurrentValueAsString)); builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString)); builder.AddAttribute(6, "onblur", EventCallback.Factory.Create(this, _ => { this.EditContext.NotifyFieldChanged(this.FieldIdentifier); })); builder.CloseElement(); } }
|
RenderFragment DynamicComponent() => builder =>
{
var dataVal = DateTime.Now;
var propInfoValue = typeof(Annotation).GetProperty("date");
builder.OpenElement(0, "EditForm");
builder.AddAttribute(1, "EditContext", EditContext);
builder.OpenComponent(2, typeof(EjsDatePicker));
builder.AddAttribute(3, "Value", dataVal);
builder.AddAttribute(6, "Blur",
Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Syncfusion.EJ2.Blazor.Calendars.BlurEventArgs>(this, onBlur));
builder.CloseComponent();
builder.CloseElement();
};
public void onBlur(BlurEventArgs args)
{
//customize your code here
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
