박진선의 프로그래밍

jQuery를 활용한 timepicker

.ui-timepicker-wrapper {

overflow-y: auto;

height: 150px;

width: 6.5em;

background: #fff;

border: 1px solid #ddd;

-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);

-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);

box-shadow:0 5px 10px rgba(0,0,0,0.2);

outline: none;

z-index: 10001;

margin: 0;

}

.ui-timepicker-wrapper.ui-timepicker-with-duration {

width: 13em;

}

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {

width: 11em;

}

.ui-timepicker-list {

margin: 0;

padding: 0;

list-style: none;

}

.ui-timepicker-duration {

margin-left: 5px; color: #888;

}

.ui-timepicker-list:hover .ui-timepicker-duration {

color: #888;

}

.ui-timepicker-list li {

padding: 3px 0 3px 5px;

cursor: pointer;

white-space: nowrap;

color: #000;

list-style: none;

margin: 0;

}

.ui-timepicker-list:hover .ui-timepicker-selected {

background: #fff; color: #000;

}

li.ui-timepicker-selected,

.ui-timepicker-list li:hover,

.ui-timepicker-list .ui-timepicker-selected:hover {

background: #1980EC; color: #fff;

}

li.ui-timepicker-selected .ui-timepicker-duration,

.ui-timepicker-list li:hover .ui-timepicker-duration {

color: #ccc;

}

.ui-timepicker-list li.ui-timepicker-disabled,

.ui-timepicker-list li.ui-timepicker-disabled:hover,

.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {

color: #888;

cursor: default;

}

.ui-timepicker-list li.ui-timepicker-disabled:hover,

.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {

background: #f2f2f2;

}

위 css와 https://github.com/jonthornton/jquery-timepicker/blob/master/jquery.timepicker.js 자바스크립트를 추가하고 input 에 id를 부여하고 $("#id").timepicker(); 를 호출하면 끝! 정말간단해요 기본적으로 24시간이 모두 출력이 된다.

option

아래 출저로 접속하면 옵션과, 이벤트, 메서드를 확인 할 수 있다. 많이 쓰일 것 같은 것만 적을게요

maxTime - 최대 시간

minTime - 최소 시간

timeFormat - 시간 형식 ( H:i:s , H:i A ) 등등 PHP시간 형식을 따른다고 한다.

step - 50으로 할 경우 1:00, 1:50, 2:40 ... 이렇게 노출 된다.

className - ui-timepicker-wrapper클래스에 추가로 클래스를 추가 한다.

method

$("#id").timepicker('   method   ')

hide : 이름 대로 안보이게 한다

show: 이름 대로 보이게 한다

remove: 이름 대로 삭제

getTime: 시간을 가져온다.

궁금한거 있으시면 언제든 댓글 남겨주세요. 그럼 재밌는 코딩 되세요~!!

출저:https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery