Jquery TimePicker: Cómo cambiar dinámicamente los parámetros

Question

Estoy usando un Jquery Timepicker.

Tengo dos campos de entrada: para aceptar veces.

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

estoy usando un temporizador jQuery UI según 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 
}); 

Quiero que cuando se selecciona el primer TimePicker, el parámetro 'MinTime' para el segundo se cambia. Básicamente, estoy tratando de recopilar la hora de inicio y la hora de finalización para cierta actividad. Y quiero que el segundo cuadro de entrada muestre las opciones del valor del primer campo de entrada (hora de inicio).

Answer 1

Se podría hacer algo como esto,

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

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

Lo que está haciendo aquí es que en la función onSelect del #startTime, se establece la opción minTime de #endTime al valor de #startTime

Ver esto JS Fiddle.

Answer 2

Los widgets de jQuery-UI generalmente admiten un método options que le permite cambiar las opciones en una instancia existente. métodos de widgets se denominan mediante el suministro de una cadena como el primer argumento de la llamada plugin:

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

por lo que este debe trabajar para usted:

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

Answer 3

Usted puede ir para onchange evento:

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

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

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

Modifiqué el código publicado un poco en la primera respuesta aquí está el violín que funciona http://jsfiddle.net/NXVy2/215/

se pueden utilizar en (el 'cambio' ... demasiado

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