DatePicker: Execute Custom Function when any date is selected

5 posts, 0 answers
  1. TJim
    TJim avatar
    9 posts
    Member since:
    May 2018

    Posted 08 Aug 2018 Link to this post

    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" })
     
                                        )
  2. TJim
    TJim avatar
    9 posts
    Member since:
    May 2018

    Posted 08 Aug 2018 Link to this post

    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.
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2379 posts

    Posted 09 Aug 2018 Link to this post

    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.
  4. TJim
    TJim avatar
    9 posts
    Member since:
    May 2018

    Posted 09 Aug 2018 in reply to Viktor Tachev Link to this post

    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.

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    771 posts

    Posted 13 Aug 2018 Link to this post

    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.
Back to Top