docs(AI, TimePicker): ticket-related improvements (#3065)

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: github-actions[bot]

ai/mcp-server.md

@@ -16,6 +16,7 @@ The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) le
 
 To use the Telerik Blazor MCP server, you need:
 
+* [Node.js](https://nodejs.org/en) 18 or a newer version.
 * A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*. Using the latest version of the MCP client is recommended.
 * A [Telerik user account](https://www.telerik.com/account/).
 * An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).

components/timepicker/events.md

@@ -22,49 +22,30 @@ This article explains the events available in the Telerik TimePicker for Blazor:
 
 The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the dropdown.
 
->caption Handle ValueChanged
+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.
 
-````RAZOR
-@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);
-    }
-}
-````
-
-@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
-
-@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
-
->caption Handle ValueChanged and provide initial value
+>caption Handle the TimePicker ValueChanged event
 
 ````RAZOR
-@result
+@Result
 <br />
-model value: @thePickerValue
+TimePicker Value: @TimePickerValue
 <br />
 
-<TelerikTimePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>
+<TelerikTimePicker Value="@TimePickerValue"
+                   ValueChanged="@( (DateTime d) => TimePickerValueChanged(d) )">
+</TelerikTimePicker>
 
 @code {
-    string result;
+    private string Result { get; set; } = string.Empty;
 
-    DateTime thePickerValue { get; set; } = DateTime.Now;
+    private DateTime TimePickerValue { get; set; } = DateTime.Now;
 
-    private void MyValueChangeHandler(DateTime theUserInput)
+    private void TimePickerValueChanged(DateTime newValue)
     {
-        result = $"The user entered: {theUserInput}";
+        Result = $"The user entered: {newValue}";
 
-        //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
-        thePickerValue = theUserInput;
+        TimePickerValue = newValue;
     }
 }
 ````
@@ -75,22 +56,27 @@ The `OnChange` event represents a user action - confirmation of the current valu
 
 The time picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component.
 
->caption Handle OnChange
+>caption Handle the TimePicker OnChange event
 
 ````RAZOR
-@result
+@Result
+<br />
+TimePicker Value: @TimePickerValue
 <br />
 
-<TelerikTimePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikTimePicker>
+<TelerikTimePicker @bind-Value="@TimePickerValue"
+                   OnChange="OnTimePickerChange">
+</TelerikTimePicker>
 
 @code {
-    string result;
+    private string Result { get; set; } = string.Empty;
+
+    private DateTime TimePickerValue { get; set; } = DateTime.Now;
 
-    private void MyOnChangeHandler(object theUserInput)
+    private void OnTimePickerChange(object currentValue)
     {
-        // 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);
+        // Cast the event argument to the actual value type
+        Result = $"The user entered: {(DateTime)currentValue}";
     }
 }
 ````
@@ -99,30 +85,6 @@ The time picker is a generic component, so you must provide either a `Value`, or
 
 >tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
 
->caption Handle OnChange and use two-way binding
-
-````RAZOR
-@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);
-    }
-}
-````
-
 ## OnOpen
 
 The `OnOpen` event fires before the TimePicker popup renders.