Question

我正在使用Jquery Timepicker。

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

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

我按照documentation

使用Jquery UI计时器

$('#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'参数会被更改。基本上我正在尝试收集某些活动的开始时间和结束时间。我希望第二个输入框显示第一个输入字段（开始时间）本身的值的选项。

Answer 1

你会做这样的事情，

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

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

您在此处所做的是，在onSelect的{{1}}函数中，您将#startTime的选项minTime设置为#endTime的值

请参阅此JS Fiddle。

Answer 2

您可以参加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/

的工作小提琴

你可以使用on（'更改'......太

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

Answer 3

jQuery-UI小部件通常支持options方法，允许您更改现有实例上的选项。通过提供字符串作为插件调用的第一个参数来调用Widget方法：

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

所以这适合你：

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

Jquery TimePicker：如何动态更改参数

3 个答案: