DatePicker component
This article demonstrates how to use the DatePicker component.
Get and set the value
As all Radzen Blazor input components the DatePicker has a Value
property which gets and sets the value of the component.
Use @bind-Value
to get the user input.
<RadzenDatePicker @bind-Value=@value Change=@OnChange />
@code {
DateTime? value = DateTime.Today;
void OnChange(DateTime? value)
{
Console.WriteLine($"Value changed to {value}");
}
}
Use DateFormat property to specify format of the DateTime value displayed in the component input.
<RadzenDatePicker @bind-Value=@value DateFormat="d" />
Use ShowTime, ShowSeconds, ShowTimeOkButton and TimeOnly properties to control the time parts visibility of the DatePicker.
<RadzenDatePicker @bind-Value=@value ShowTime="true" ShowSeconds="true" ShowTimeOkButton="true" TimeOnly="true" />
Use HoursStep, MinutesStep and SecondsStep properties to set step for the time numeric inputs of the DatePicker.
<RadzenDatePicker @bind-Value=@value HoursStep="1.5" MinutesStep="5" SecondsStep="10" />
Use Inline="true" to display just the calendar component of the DatePicker.
<RadzenDatePicker @bind-Value=@value Inline="true" />
Use DateRender event to set attributes for the date.
<RadzenDatePicker @bind-Value=@value DateRender=@DateRenderSpecial />
@code {
DateTime? value = DateTime.Today;
IEnumerable<DateTime> dates = new DateTime[] { DateTime.Today.AddDays(-1), DateTime.Today.AddDays(1) };
void DateRenderSpecial(DateRenderEventArgs args)
{
if (dates.Contains(args.Date))
{
args.Attributes.Add("style", "background-color: #ff6d41; border-color: white;");
}
args.Disabled = dates.Contains(args.Date);
}
}