diff --git a/components/datepicker/events.md b/components/datepicker/events.md
index 35b0612c81..0e7a261da8 100644
--- a/components/datepicker/events.md
+++ b/components/datepicker/events.md
@@ -112,24 +112,21 @@ The DatePicker is a generic component, so you must either provide a `Value`, or
>caption Handle OnChange and use two-way binding
````RAZOR
-@result
-
-model value: @DatePickerValue
-
-
+ OnChange="@DatePickerValueChanged"
+ Width="150px">
-@code {
- private string result = string.Empty;
+OnChange fired at @LastOnChange?.ToString("HH:mm:ss.fff")
- private DateTime? DatePickerValue { get; set; } = DateTime.Today;
+@code {
+ private DateTime? DatePickerValue { get; set; }
+ private DateTime? LastOnChange { get; set; }
- private void MyOnChangeHandler(object userInput)
+ private void DatePickerValueChanged(object currentValue)
{
- // 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)userInput);
+ LastOnChange = DateTime.Now;
+ Console.WriteLine($"The current Value is {(DateTime?)currentValue}");
}
}
````
diff --git a/components/datetimepicker/events.md b/components/datetimepicker/events.md
index c574f3acbb..cfd65d866e 100644
--- a/components/datetimepicker/events.md
+++ b/components/datetimepicker/events.md
@@ -102,33 +102,34 @@ As an argument, the event handler receives a [`DateTimePickerCalendarCellRenderE
## OnChange
-The `OnChange` event represents a user action that confirms the current value. It fires when the user presses `Enter` in the input or when the input loses focus.
+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 date and 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 DateTimePicker is a generic component, so you must either provide a `Value`, or a type to the `T` parameter of the component.
->caption Handle OnChange and use two-way binding
+>caption Handle DateTimePicker OnChange and use two-way Value binding
````RAZOR
-@result
-
-model value: @DateTimePickerValue
-
-
+ OnChange="@DateTimePickerValueChanged"
+ Width="300px">
-@code {
- private string result = string.Empty;
+OnChange fired at @LastOnChange?.ToString("HH:mm:ss.fff")
- private DateTime? DateTimePickerValue { get; set; } = DateTime.Now;
+@code {
+ private DateTime? DateTimePickerValue { get; set; }
+ private DateTime? LastOnChange { get; set; }
- private void MyOnChangeHandler(object userInput)
+ private void DateTimePickerValueChanged(object currentValue)
{
- // if you do not provide a Value, you must provide the Type parameter to the component
- result = string.Format("The user entered: {0}", (DateTime)userInput);
+ LastOnChange = DateTime.Now;
+ Console.WriteLine($"The current Value is {(DateTime?)currentValue}");
}
}
````
diff --git a/components/timepicker/events.md b/components/timepicker/events.md
index 4e6af41cf1..d589efc3a2 100644
--- a/components/timepicker/events.md
+++ b/components/timepicker/events.md
@@ -52,31 +52,34 @@ TimePicker Value: @TimePickerValue
## 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 `OnChange` event represents a user action that confirms the current value. It fires when the user:
-The time picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component.
+* Presses `Enter` while the textbox is focused.
+* Clicks **Set** in the time selection popup.
+* Blurs the component.
->caption Handle the TimePicker OnChange event
+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.
-````RAZOR
-@Result
-
-TimePicker Value: @TimePickerValue
-
+The TimePicker is a generic component, so you must either provide a `Value`, or a type to the `T` parameter of the component.
+
+>caption Handle DateTimePicker OnChange and use two-way Value binding
+````RAZOR
+ OnChange="@TimePickerValueChanged"
+ Width="150px">
-@code {
- private string Result { get; set; } = string.Empty;
+OnChange fired at @LastOnChange?.ToString("HH:mm:ss.fff")
- private DateTime TimePickerValue { get; set; } = DateTime.Now;
+@code {
+ private DateTime? TimePickerValue { get; set; }
+ private DateTime? LastOnChange { get; set; }
- private void OnTimePickerChange(object currentValue)
+ private void TimePickerValueChanged(object currentValue)
{
- // Cast the event argument to the actual value type
- Result = $"The user entered: {(DateTime)currentValue}";
+ LastOnChange = DateTime.Now;
+ Console.WriteLine($"The current Value is {(DateTime?)currentValue}");
}
}
````