제이쿼리 timepicker

기본적인 timepicker 에 대한 설명과 옵션은 http://timepicker.co/ 에서 확인

timepicker 다운로드는 https://github.com/wvega/timepicker 에서 다운

(기본적인 timepicker를 사용하는 방법은 홈페이지에 잘 나와 있음)

두개의 시간을 정하여, 

첫번째 시간에서 선택한 시간을

두번째 시간에서는 첫번째 시간 이후 부터 선택을 하게 해주려면 아래와 같은 timepicker 사용 

즉 첫번째 시간에서 선택한 시간을 두번째 시간의 mintime으로 정해주는 방법

변형된 형태의 timepicker 는 http://jonthornton.github.io/jquery-timepicker/

다운로드는 https://github.com/jonthornton/jquery-timepicker

<div class="input-a margin-t-10"><input type="text" id="stime" name="stime" value="" class="timePicker" placeholder="00:00 AM"></span></div> <div class="input-a margin-t-10"><input type="text" id="etime" name="etime" value="" class="timePicker" placeholder="23:00 AM"></span></div>

<script> $('#stime') .timepicker({timeFormat:'H:i', 'minTime':'06:00','maxTime': '23:00','scrollDefaultNow': true }) //stime 시작 기본 설정 .on('changeTime', function() { //stime 을 선택한 후 동작 var from_time = $("input[name='stime']").val(); //stime 값을 변수에 저장 $('#etime').timepicker('option', 'minTime', from_time); //etime의 mintime 지정 if ($('#etime').val() && $('#etime').val() < from_time) { $('#etime').timepicker('setTime', from_time); //etime을 먼저 선택한 경우 그리고 etime시간이 stime시간보다 작은경우 etime시간 변경 } }); $('#etime').timepicker({timeFormat:'H:i','minTime':'06:00','maxTime': '23:00'}); //etime 시간 기본 설정 </script>

위의 자바스크립트는  https://github.com/jonthornton/jquery-timepicker 에서 받은 timepicker를 사용할때 적용가능

test.html