Question

I am working with a Jquery time picker from http://labs.perifer.se/timedatepicker/

In the view I have this time picker control.

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

If a particular time (say 11:00 AM) is picked previously (and saved in db) that particular option should be disabled and not available for subsequent selections. In a MVC controller, via a service layer, I am getting a ‘list’ of all previously picked times.

    public ActionResult DisableTimes(param1, param2)
    {            
        List<string> listTimes = Webservice(param1,param2);
        //getting previously saved times - above line
        return Json(listTimes, JsonRequestBehavior.AllowGet);
    }

I am making an ajax call in a java script function like this.. that passes the parameters to MVC controller and returns back the list of times.

       $.ajax({

          "url": "/ControllerName/DisableTimes/",
          "type": "get",
          "dataType": "json",
          "data": { param1: $("#paramval1").val(), param2: $("#paramvalue2").val() },
          "success": function (listTimes) {

              //Code here - use the listTimes values and disable the 
              //appropriate timepicker drop down choices.
               }
           });

How can I make use of the list of times “listTimes” I am getting from controller to disable the Jquery Timepicker choices?

Answer 1

You should just be able to remove the li’s from available options in the following manner:

$(listTimes).each(function() {
    $('.time-picker').find('li:contains("' + this + '")').remove();
});

Edit:

It will be a little bit harder if you have multiple time pickers on a page though. You should be able to add the :first selector to only get the first time picker.

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

Live DEMO