This is a migrated thread and some comments may be shown as answers.

DatePicker: Execute Custom Function when any date is selected

4 Answers 406 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
TJim
Top achievements
Rank 1
TJim asked on 08 Aug 2018, 06:52 PM

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

4 Answers, 1 is accepted

Sort by
0
TJim
Top achievements
Rank 1
answered on 08 Aug 2018, 06:56 PM
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.
0
Viktor Tachev
Telerik team
answered on 09 Aug 2018, 11:17 AM
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. 



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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
TJim
Top achievements
Rank 1
answered on 09 Aug 2018, 03:34 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 13 Aug 2018, 01:42 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Date/Time Pickers
Asked by
TJim
Top achievements
Rank 1
Answers by
TJim
Top achievements
Rank 1
Viktor Tachev
Telerik team
Alex Hajigeorgieva
Telerik team
Share this question
or