Timepicker - HTML Value

5 posts, 0 answers
  1. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 19 Sep Link to this post

    Hey Guys

     

    Just busy adding custom validation to my solution and came across this issue.

    I used the example of adding custom validation for Dates provided here  and change it to support time between and using TimeSpans.

    Please ignore how crappy the coding is, I am not a javascript coder, so I just bash my way through it! 

    IsTimeBetween: function (input) {
                            if (input.is("[data-val-IsTimeBetween]") && input.val() != "") {
                                var fromtime =input.val();
                                var fromtimeAr = fromtime.split(":");
                                var fromtimeMin = 0;
                                fromtimeMin = fromtimeMin + parseInt(fromtimeAr[1]);
                                fromtimeMin = fromtimeMin + parseInt(fromtimeAr[0] * 60);
                                console.log('validating between');
                                 
                                var lowertime = $("[name='" + input.attr("data-val-IsTimeBetween-lowerproperty") + "']").val();
                                var lowertimeAr = lowertime.split(":");
                                var lowertimeMin = 0;
                                lowertimeMin = lowertimeMin + parseInt(lowertimeAr[1]);
                                lowertimeMin = lowertimeMin + parseInt(lowertimeAr[0] * 60);
                                 
                                var uppertime = $("[name='" + input.attr("data-val-IsTimeBetween-upperproperty") + "']").val();
                                var uppertimeAr = uppertime.split(":");
                                var uppertimeMin = 0;
                                uppertimeMin = uppertimeMin + parseInt(uppertimeAr[1]);
                                uppertimeMin = uppertimeMin + parseInt(uppertimeAr[0] * 60);
                                 
                                return !fromtime || !lowertime || !uppertime || (fromtimeMin > lowertimeMin && fromtimeMin < uppertimeMin);
                            }
                            return true;
                        }     

  2. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 19 Sep in reply to Rob Link to this post

    Doh , hit the enter 

     

    Anyway, this works fine for Dates, but it does not work for TImePicker because when the 'other' fields are timepickers, the value that has been set to , does not get updated in the HTML.

    I checked this on Telerik's own demo.. see attached file for what I mean.

    This means when the validation tries to compare the values, it only reads the initial values of the other fields.

    What is the way around this? Can I refer to the model instead. ( I have 28 time pickers on the same input form)

    Thanks

    Rob

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 19 Sep in reply to Rob Link to this post

    Correction.. reading the model of course does not work! :(   ( I feel like a noob constantly.)

    I'll carry on trying and update this if I find a way :)  

     

     

     

  5. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 19 Sep in reply to Rob Link to this post

    Embarrassingly easy after asking .. I'll put the answer here.
    Yes I know I could have grabbed the date of the tested field and just compare the other dates dates  but I will be adding more stuff later as I need to cover 00:00 - 24:00 and that's easier to handle as minutes since midnight. 
    IsTimeBetween: function (input) {
                           if (input.is("[data-val-IsTimeBetween]") && input.val() != "") {
                               var fromtime =input.val();
                               var fromtimeAr = fromtime.split(":");
                               var fromtimeMin = 0;
                               fromtimeMin = fromtimeMin + parseInt(fromtimeAr[1]);
                               fromtimeMin = fromtimeMin + parseInt(fromtimeAr[0] * 60);
                               console.log('validating between');
     
                               var lowertime = $("[name='" + input.attr("data-val-IsTimeBetween-lowerproperty") + "']").data("kendoTimePicker").value();
                               var lowertimeMin = 0;
                               lowertimeMin = lowertimeMin + lowertime.getMinutes();
                               lowertimeMin = lowertimeMin + (lowertime.getHours() * 60);
                                
                               var uppertime = $("[name='" + input.attr("data-val-IsTimeBetween-upperproperty") + "']").data("kendoTimePicker").value();
                               var uppertimeMin = 0;
                               uppertimeMin = uppertimeMin + uppertime.getMinutes();
                               uppertimeMin = uppertimeMin + (uppertime.getHours() * 60);                       
                                
                               return !fromtime || !lowertime || !uppertime || (fromtimeMin > lowertimeMin && fromtimeMin < uppertimeMin);
                           }
                           return true;
                       }

  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Sep Link to this post

    Hello Rob,

    Thank you for the provided updates on this case and for sharing your solution in the thread. I'm sure it will be of a help for other users trying to implement the same functionality.

    Regards,
    Maria Ilieva
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready