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

Timepicker - HTML Value

4 Answers 74 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
Rob asked on 19 Sep 2016, 10:05 PM

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;
                    }     

4 Answers, 1 is accepted

Sort by
0
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 19 Sep 2016, 10:11 PM

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

0
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 19 Sep 2016, 10:30 PM

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 :)  

 

 

 

0
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 19 Sep 2016, 11:07 PM
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;
                   }

0
Maria Ilieva
Telerik team
answered on 21 Sep 2016, 11:31 AM
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
Tags
Date/Time Pickers
Asked by
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
Maria Ilieva
Telerik team
Share this question
or