hoony's web study

728x90
반응형

 매번 datepicker만 쓰다가 이번 개발을 하면서 timepicker를 사용하게 되어서 이렇게 적어봅니다.

jquery timepicker

참고할 사이트는 : https://timepicker.co/

 

jQuery Timepicker

jQuery Timepicker is a plugin to help users easily input time entries. It can parse the most used time representations allowing you and your users to enter time using their prefered way for writing it. Also, if writing is not your thing, you can also choos

timepicker.co

사용할실때는 아래와 같이 사용하시면 됩니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

$('.timepicker').timepicker({
    timeFormat: 'h:mm p',
    interval: 60,
    minTime: '10',
    maxTime: '6:00pm',
    defaultTime: '11',
    startTime: '10:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

시간에 대한 옵션은 

h 12 hour without leading 0. hh 12 hour with leading 0.
H 24 hour without leading 0. HH 24 hour with leading 0.
m minutes without leading 0. mm minutes with leading 0.
s seconds without leading 0. ss seconds with leading 0.
p AM or PM

위의 테이블과 같습니다.

오늘도 즐거운 코딩생활하세요 ^^ 

728x90

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading