Merge pickers-onchange-3204 into production

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
-<br />
-model value: @DatePickerValue
-<br />
-
 <TelerikDatePicker @bind-Value="@DatePickerValue"
-                   OnChange="@MyOnChangeHandler">
+                   OnChange="@DatePickerValueChanged"
+                   Width="150px">
 </TelerikDatePicker>
 
-@code {
-    private string result = string.Empty;
+<span><code>OnChange</code> fired at <strong>@LastOnChange?.ToString("HH:mm:ss.fff")</strong></span>
 
-    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}");
     }
 }
 ````

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
-<br />
-model value: @DateTimePickerValue
-<br />
-
 <TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
-                       OnChange="@MyOnChangeHandler">
+                       OnChange="@DateTimePickerValueChanged"
+                       Width="300px">
 </TelerikDateTimePicker>
 
-@code {
-    private string result = string.Empty;
+<span><code>OnChange</code> fired at <strong>@LastOnChange?.ToString("HH:mm:ss.fff")</strong></span>
 
-    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}");
     }
 }
 ````

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
-<br />
-TimePicker Value: @TimePickerValue
-<br />
+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
 <TelerikTimePicker @bind-Value="@TimePickerValue"
-                   OnChange="OnTimePickerChange">
+                   OnChange="@TimePickerValueChanged"
+                   Width="150px">
 </TelerikTimePicker>
 
-@code {
-    private string Result { get; set; } = string.Empty;
+<span><code>OnChange</code> fired at <strong>@LastOnChange?.ToString("HH:mm:ss.fff")</strong></span>
 
-    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}");
     }
 }
 ````