2012-06-09 103 views
5

我正在使用Jquery Timepicker。Jquery TimePicker:如何动态更改参数

我有两个输入字段 - 接受时间。

<input id="startTime" size="30" type="text" /> 
<input id="endTime" size="30" type="text" /> 

我使用一个jQuery UI计时器按documentation

$('#startTime').timepicker({ 
    'minTime': '6:00am', 
    'maxTime': '11:30pm', 
    'onSelect': function() { 
     //change the 'minTime parameter of #endTime <--- how do I do this ? 
    } 
}); 
$('#endTime').timepicker({ 
    'minTime': '2:00pm', 
    'maxTime': '11:30pm', 
    'showDuration': true 
}); 

我想要选择第一timePicker的情况下,“minTime”的第二个参数得到改变。基本上我试图收集某些活动的开始时间和结束时间。我希望第二个输入框显示第一个输入字段(开始时间)本身的值。

+0

我想同样的问题将是有效的其他JQuery的元素。 –

+0

该页面有一个示例(最后一个),它与[source](http://jonthornton.github.com/jquery-timepicker/lib/datepair.js)一起执行此操作。 – sachleen

回答

6

你会做这样的事情,

$('#startTime').timepicker({ 
       'minTime': '6:00am', 
       'maxTime': '11:30pm', 
        'onSelect': function() { 

        $('#endTime').timepicker('option', 'minTime', $(this).val());       
       } 
      }); 

什么,你在这里做的是,在#startTimeonSelect功能,你的#endTime选项minTime设置为#startTime

看到价值这JS Fiddle

+0

太棒了!谢了哥们 。这工作。干杯! –

+3

它不适合我以及你的JS小提琴 –

+1

此JS小提琴显示没有改变minTime。它总是2PM – ivanacorovic

4

jQuery-UI小部件通常支持options方法,该方法允许您更改现有实例上的选项。窗口小部件的方法是通过提供一个字符串作为第一个参数插件调用名为:

$(...).widget_name('method_name', arg...) 

所以这应该为你工作:

$('#endTime').timepicker('option', 'minTime', new_min_time) 
+0

谢谢先生!这是有帮助:) –

+0

选项完美的作品,这应该被标记为正确的答案! – ivanacorovic

6

你可以去onchange事件:

 $('#startTime').timepicker(); 

     $('#endTime').timepicker({ 
      'minTime': '12:00am', 
      'showDuration': true 
     }); 

     $('#startTime').on('changeTime', function() { 
      $('#endTime').timepicker('option', 'minTime', $(this).val()); 
     }); 

我修改了代码,在第一个回复中发布了一下,这里是它的工作小提琴http://jsfiddle.net/NXVy2/215/

您可以使用(“变” ......太

$('#startTime').on('change', function() { 
     $('#endTime').timepicker('option', 'minTime', $(this).val()); 
    }); 
+0

接受的答案不起作用(不再?),但是这个对我来说非常合适。 – nematoth

+0

这是正确的答案!谢谢你 – marknt15