2

我正在使用来自http://labs.perifer.se/timedatepicker/的 Jquery 时间选择器

在视图中，我有这个时间选择器控件。

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

如果之前选择了特定时间（例如上午 11:00）（并保存在 db 中），则应禁用该特定选项并且不可用于后续选择。在 MVC 控制器中，通过服务层，我得到了所有先前选择的时间的“列表”。

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

我在这样的java脚本函数中进行ajax调用..将参数传递给MVC控制器并返回时间列表。

       $.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.
               }
           });

如何利用从控制器获得的时间列表“listTimes”来禁用 Jquery Timepicker 选项？

4

3 回答 3

1

显然这个 datepicker 插件不能让你删除他的行为。

但我相信您可以从文档中删除该元素。

并重新添加。

使用 ：

http://api.jquery.com/remove/

和

http://api.jquery.com/add/

或者您每次可以有两个元素，显示/隐藏您需要或使用的内容：

http://api.jquery.com/hide/

和

http://api.jquery.com/show/

于 2012-05-30T10:12:55.663 回答
1

默认情况下，该插件似乎不提供该功能。我会稍微更改插件代码中的这些行（它附加到列表的位）

// Build the list
    for(var i = 0; i < times.length; i++) {
      $tpList.append("<li>" + times[i] + "</li>");
    }

给每个 li 添加一些标识符的东西：

for(var i = 0; i < times.length; i++) {
      $tpList.append("<li class='"+times[i]+'">" + times[i] + "</li>");
    }`

只是为了使选择这些 li 元素更容易，然后在您的成功处理程序中，执行以下操作：

    "success": function (listTimes) {
         $(listTimes).each(function(i,item){
               $('li.'+item).remove();
         });
        //or may be if you are just getting an array of strings from the webservice then something like this will be enough: $('.'+listTimes.join(',.')).remove();
     }

并将 timepicker 插件调用 $("#startTime").timePicker 放在 ajax 成功回调中，这样就没有竞争条件，因为 ajax 回调可能会在插件初始化之后发生。

另一种选择是处理 $('#startTime').change 并检查时间是否不允许并向用户显示错误。

于 2012-05-30T12:08:44.533 回答
1

您应该能够通过以下方式从可用选项中删除 li：

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

编辑：

但是，如果您在一个页面上有多个时间选择器，那将会有点困难。您应该能够添加:first选择器以仅获取第一次选择器。

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

现场演示

于 2012-05-30T12:31:52.213 回答