Events
This article explains the events available in the Telerik DatePicker for Blazor:
OnChange
The OnChange event represents a user action - confirmation of the current value. It fires when the user presses Enter in the input, or when the input loses focus.
The date picker is a generic component, so you must provide either a Value, or a type to the T parameter of the component.
Handle OnChange
@result
<br />
<TelerikDatePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikDatePicker>
@code {
string result;
private void MyOnChangeHandler(object theUserInput)
{
// the handler receives an object that you may need to cast to the type of the component
// if you do not provide a Value, you must provide the Type parameter to the component
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (DateTime)theUserInput);
}
}
The event is an
EventCallbackand it can be synchronous (returnvoid), or it can also be asynchronous and returnasync Task.
The
OnChangeevent is a custom event and does not interfere with bindings, so you can use it together with models and forms.
Handle OnChange and use two-way binding
@result
<br />
model value: @thePickerValue
<br />
<TelerikDatePicker @bind-Value="@thePickerValue" OnChange="@MyOnChangeHandler"></TelerikDatePicker>
@code {
string result;
DateTime? thePickerValue { get; set; } = DateTime.Now;
private void MyOnChangeHandler(object theUserInput)
{
// the handler receives an object that you may need to cast to the type of the component
// if you do not provide a Value, you must provide the Type parameter to the component
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value);
}
}
ValueChanged
The ValueChanged event fires upon every change (for example, keystroke) in the input.
Handle ValueChanged
@result
<br />
<TelerikDatePicker ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDatePicker>
@code {
string result;
private void MyValueChangeHandler(DateTime theUserInput)
{
result = string.Format("The user entered: {0}", theUserInput);
}
}
The event is an
EventCallbackand it can be synchronous (returnvoid), or it can also be asynchronous and returnasync Task.
The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.
Handle ValueChanged and provide initial value
@result
<br />
model value: @thePickerValue
<br />
<TelerikDatePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDatePicker>
@code {
string result;
DateTime thePickerValue { get; set; } = DateTime.Now;
private void MyValueChangeHandler(DateTime theUserInput)
{
result = string.Format("The user entered: {0:dd/MMM/yyyy}", theUserInput);
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
thePickerValue = theUserInput;
}
}
OnOpen
The OnOpen event fires before the DatePicker popup renders.
The event handler receives as an argument an DatePickerOpenEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled |
Set the IsCancelled property to true to cancel the opening of the popup. |
<TelerikDatePicker @bind-Value="@DatePickerValue"
OnOpen="@OnDatePickerPopupOpen"
Format="dd MMMM yyyy"
Min="@Min" Max="@Max">
</TelerikDatePicker>
@code {
private DateTime DatePickerValue { get; set; } = DateTime.Now;
private DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
private void OnDatePickerPopupOpen(DatePickerOpenEventArgs args)
{
//set the IsCancelled to true to cancel the OnOpen event
args.IsCancelled = false;
}
}
OnClose
The OnClose event fires before the DatePicker popup closes.
The event handler receives as an argument an DatePickerCloseEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled |
Set the IsCancelled property to true to cancel the closing of the popup. |
@* Cancel the OnClose event based on a condition *@
<TelerikDatePicker @bind-Value="@DatePickerValue"
OnClose="@OnDatePickerPopupClose"
Format="dd MMMM yyyy"
Min="@Min" Max="@Max">
</TelerikDatePicker>
@code {
private DateTime DatePickerValue { get; set; } = DateTime.Today;
private DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
private void OnDatePickerPopupClose(DatePickerCloseEventArgs args)
{
//cancel the OnClose event based on a condition
if (DatePickerValue > DateTime.Today)
{
args.IsCancelled = true;
}
}
}
OnBlur
The OnBlur event fires when the component loses focus.
Handle the OnBlur event
@* You do not have to use OnChange to react to loss of focus *@
<TelerikDatePicker @bind-Value="@TheDate"
OnBlur="@OnBlurHandler">
</TelerikDatePicker>
@code{
async Task OnBlurHandler()
{
Console.WriteLine($"BLUR fired, current value is {TheDate}.");
}
DateTime? TheDate { get; set; } = DateTime.Now;
}