2012-06-09 3 views
5

Używam Jquery Timepicker.Jquery TimePicker: Jak dynamicznie zmieniać parametry

Mam dwa pola wprowadzania danych - do akceptowania czasów.

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

używam timer jQuery UI zgodnie 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 
}); 

chcę, że kiedy zostanie wybrany pierwszy timepicker, parametrem 'MinTime' dla drugiego zostanie zmieniony. Zasadniczo próbuję zebrać czas rozpoczęcia i czas zakończenia dla niektórych działań. I chcę, aby drugie pole wejściowe pokazywało opcje z wartości pierwszego pola wejściowego (czas rozpoczęcia).

+0

myślę to samo pytanie byłaby ważna dla innych elementów JQuery, jak również. –

+0

Ta strona ma przykład (ostatni), gdzie to robi wraz z [source] (http://jonthornton.github.com/jquery-timepicker/lib/datepair.js). – sachleen

Odpowiedz

6

byłoby zrobić coś takiego,

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

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

Co robisz tutaj jest to, że w funkcji onSelect z #startTime można ustawić opcję minTime z #endTime do wartości #startTime

See to JS Fiddle.

+0

Awesome! Dzięki stary . To zadziałało. Twoje zdrowie ! –

+3

to nie działa dla mnie, tak jak dla JS Fiddle –

+1

Ten JS Fiddle nie zmienia czasu minTime. Zawsze jest 2 PM – ivanacorovic

4

Widżety jQuery-UI ogólnie obsługują metodę options, która umożliwia zmianę opcji istniejącej instancji. Metody widget nazywane są przez dostarczanie ciąg jako pierwszy argument do wywołania plugin:

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

tak to powinno działać dla Ciebie:

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

Dzięki, proszę pana! To było pomocne :) –

+0

Opcja działa idealnie, To powinno być oznaczone jako poprawna odpowiedź! – ivanacorovic

6

Możesz przejść do onChange imprezy:

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

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

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

Zmodyfikowałem kod nieco opublikowany w pierwszej odpowiedzi tutaj jest działające skrzypce dla niego http://jsfiddle.net/NXVy2/215/

można wykorzystywać na („zmiany” ... zbyt

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

Przyjęta odpowiedź nie działa (już?), Ale ta zadziałała idealnie. – nematoth

+0

To jest poprawna odpowiedź! Dzięki za to – marknt15