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
EventCallback
and it can be synchronous (returnvoid
), or it can also be asynchronous and returnasync Task
.
The
OnChange
event 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
EventCallback
and 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;
}
}