Events
This article explains the events available in the Telerik TimePicker for Blazor:
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.
The event handler receives the new value as an argument and you must update the component Value
programmatically for the user changes to take effect.
Handle the TimePicker ValueChanged event
@Result
<br />
TimePicker Value: @TimePickerValue
<br />
<TelerikTimePicker Value="@TimePickerValue"
ValueChanged="@( (DateTime d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>
@code {
private string Result { get; set; } = string.Empty;
private DateTime TimePickerValue { get; set; } = DateTime.Now;
private void TimePickerValueChanged(DateTime newValue)
{
Result = $"The user entered: {newValue}";
TimePickerValue = newValue;
}
}
OnChange
The OnChange
event represents a user action that confirms the current value. It fires when the user:
- Presses
Enter
while the textbox is focused. - Clicks Set in the time selection popup.
- Blurs the component.
The event handler receives an object
argument that you need to cast to the actual Value
type. The argument can hold a value or be null
, depending on the user input and the Value
type.
The TimePicker is a generic component, so you must either provide a Value
, or a type to the T
parameter of the component.
Handle DateTimePicker OnChange and use two-way Value binding
<TelerikTimePicker @bind-Value="@TimePickerValue"
OnChange="@TimePickerValueChanged"
Width="150px">
</TelerikTimePicker>
<span><code>OnChange</code> fired at <strong>@LastOnChange?.ToString("HH:mm:ss.fff")</strong></span>
@code {
private DateTime? TimePickerValue { get; set; }
private DateTime? LastOnChange { get; set; }
private void TimePickerValueChanged(object currentValue)
{
LastOnChange = DateTime.Now;
Console.WriteLine($"The current Value is {(DateTime?)currentValue}");
}
}
The event is an
EventCallback
. It can be synchronous and returnvoid
, or asynchronous and returnasync Task
. Do not useasync void
.
The
OnChange
event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
OnOpen
The OnOpen
event fires before the TimePicker popup renders.
The event handler receives as an argument an TimePickerOpenEventArgs
object that contains:
Property | Description |
---|---|
IsCancelled | Set the IsCancelled property to true to cancel the opening of the popup. |
<TelerikTimePicker Min="@Min"
OnOpen="@OnTimePickerPopupOpen"
Max="@Max"
Format="hh:mm:ss tt"
@bind-Value="@TimePickerValue">
</TelerikTimePicker>
@code {
private DateTime? TimePickerValue = DateTime.Now;
private DateTime Min = new DateTime(1900, 1, 1, 8, 15, 0);
private DateTime Max = new DateTime(1900, 1, 1, 19, 30, 45);
private void OnTimePickerPopupOpen(TimePickerOpenEventArgs args)
{
//set the IsCancelled to true to cancel the OnOpen event
args.IsCancelled = false;
}
}
OnClose
The OnClose
event fires before the TimePicker popup closes.
The event handler receives as an argument an TimePickerCloseEventArgs
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 *@
<TelerikTimePicker Min="@Min"
OnClose="@OnTimePickerPopupClose"
Max="@Max"
Format="hh:mm:ss tt"
@bind-Value="@TimePickerValue">
</TelerikTimePicker>
@code {
private DateTime? TimePickerValue = DateTime.Now;
private DateTime Min = new DateTime(1900, 1, 1, 8, 15, 0);
private DateTime Max = new DateTime(1900, 1, 1, 19, 30, 45);
private void OnTimePickerPopupClose(TimePickerCloseEventArgs args)
{
//cancel the OnClose event based on a condition
if (TimePickerValue > DateTime.Now.AddHours(1))
{
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 *@
<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;
}