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}"); } } ````