DatePicker: Execute Custom Function when any date is selected

[TJim]

How would I execute a custom function when any date has been selected? 

I searched for examples, but couldn't find a function that takes into consideration dynamic datepicker ID/class.

Can we add a custom function here without using Events? Or if we have to use events, can we pass the datepicker id/class to the function -- if so how?

My markup:

@(Html.Kendo().DatePicker()
                                        .Name(@Model.Name)
                                        .Footer("Today - #= kendo.toString(data,'ddd, MMM dd, yyyy') # ")
                                        .Min("1/1/1900")
                                        .Max("1/1/2200")
                                        .Events(e => e.Close("onClose"))
                                    //.Enable((Model.SelectedValues != null && Model.SelectedValues.Length > 0) || !Model.AllowNullValue)
                                    .Value(string.IsNullOrEmpty(Model.SelectedValues)
                                            ? null
                                            : Model.SelectedValues
                                                    .Replace("[OneMonthAgo]", DateTime.Now.AddMonths(-1).Date.ToString())
                                                    .Replace("[OneYearAgo]", DateTime.Now.AddYears(-1).Date.ToString())
                                                    .Replace("[CurrentDate]", DateTime.Now.Date.ToString())
                                                    )
                                    .HtmlAttributes(new { AllowNullValue = Model.AllowNullValue.ToString().ToLower(), Prompt = Model.Prompt, onblur = "DatePickerChangeHandler(this)", Class = "DatePicker" })

                                    )

[TJim]

By the way, I'm looking to remove the requirement asterisk with the custom function if there's a valid value selected. If the value is not valid, then keep the requirement asterisk there.

[Viktor Tachev]

Hi,

Based on the provided description I guess that you would like to validate the user input in the DatePicker and show/hide an element on the page based on that. For this you can take advantage of the Validator widget available with Kendo. Check out the resources below that illustrate how the Validator can be used with other components. 

• https://demos.telerik.com/aspnet-mvc/validator
• https://docs.telerik.com/aspnet-mvc/getting-started/validation

If you prefer not to include validator you can use the built-in events of the picker. In order to implement this behavior I would suggest using the DatePicker change event. The DatePicker can be accessed in the event handler via the this keyword.



Regards,
Viktor Tachev
Progress Telerik

[TJim]

Thanks Viktor, how can I implement change event with the code above? I tried but it doesn't seem to work. Can you provide code example with the code above?

Thank you.

[Alex Hajigeorgieva]

Hi, Nguyen,

My name is Alex and I am covering for my colleague Viktor while he is away.

In the provided code snippet in the first post, I can see that there is a Close() event handler. The UI for ASP.NET wrappers for Kendo UI have a fluent interface so you can chain the next event:

.Events(e => e.Close("onClose").Change("onChange"))

https://docs.telerik.com/aspnet-mvc/helpers/datepicker/overview#event-handling

Let me know if you run into any difficulties.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik