Events
This article explains the events available in the Telerik TimePicker 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 time 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 />
<TelerikTimePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikTimePicker>
@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:HH:mm:ss}", (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 />
<TelerikTimePicker @bind-Value="@thePickerValue" OnChange="@MyOnChangeHandler"></TelerikTimePicker>
@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}", (theUserInput as DateTime?).Value);
}
}
ValueChanged
The ValueChanged event fires upon every change (for example, keystroke) in the input, and upon clicking the Set or Now buttons in the dropdown.
Handle ValueChanged
@result
<br />
<TelerikTimePicker ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>
@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 />
<TelerikTimePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>
@code {
string result;
DateTime thePickerValue { get; set; } = DateTime.Now;
private void MyValueChangeHandler(DateTime theUserInput)
{
result = $"The user entered: {theUserInput}";
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
thePickerValue = theUserInput;
}
}
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 *@
<TelerikTimePicker @bind-Value="@TheTime"
OnBlur="@OnBlurHandler">
</TelerikTimePicker>
@code{
async Task OnBlurHandler()
{
Console.WriteLine($"BLUR fired, current value is {TheTime}.");
}
DateTime? TheTime { get; set; } = DateTime.Now;
}