Question

I have 2 Jquery timePickers on a page. timePicker plug in is from http://labs.perifer.se/timedatepicker/

In the view I have these two time picker controls -.

$("#time1, #time2").timePicker({
        startTime: "09.00", 
        endTime: new Date(0, 0, 0, 19, 0, 0), 
        show24Hours: false,
        separator: '.',
        step: 60
});

“#time1” takes in ‘Beginning of an event’ time. #time2 takes in ‘End of an event’ time. I have MVC , jquery, js code that runs to get me a list of all previously selected ‘time1’s. I am hiding the previously ‘selected & saved’ values in #time1. For example, user saved 9 AM, 10 AM , 11 AM previously. I am getting those values from the database (into a list “listTimes”) and hiding those values in the #time1 control and no more visible.

  $(listTimes).each(function () {

   $('.time-picker:first').find('li:contains("' + this + '")').hide();    
                         });

But if the user picks 9 AM in time1 and 2 PM in time2, thats a 5 hour block. Not only I have to hide 9 AM, I have to hide 10, 11, 12, 1 PM also because its a 5 hour slot. I am able to hide only 9 AM until now. Would like some help in getting the remaining of the hours also hidden. I need to somehow populate the list “listTimes” with all the hours in the duration (time2-time1).

Answer 1

Something along these lines should work for you:

var startTime = "09:00";
var endTime = "11:30";
var $startTime = $('.time-picker:first').find('li:contains("' + startTime + '")');
var $currentTime = $startTime.next('li');

$startTime.hide();

while($currentTime.html() != endTime) ​{
    $currentTime.hide();
    $currentTime = $currentTime.next('li');
}​

Live DEMO