jQuery의 Datepicker는 뭔가 아쉬워, 시간이 필요해 | DateTimePicker - PLUGIN

jQuery의 datepicker를 아시나요?
jQueryui에서 input form에서 날짜를 아주 쉽게 선택할 수 있도록 해주는 아주 고마운 녀석이죠...

제이쿼리 기본 DatePicker

바로 이건데요~ 저기 input 박스를 클릭하면 이렇게 날짜를 선택할수 있게 나옵니다.
하지만...이름 그대로 날짜만 선택할 수 있어요.... 가끔 시간도 같이 선택해줘야 할때가 있는데....

그래서 다른 플러그인을 써야합니다~ 바로 datetimepicker 입니다~ 이름에서부터 알 수 있듯이 날짜와 시간을 선택할 수 있게 해주는 플러그인 입니다~

https://xdsoft.net/jqplugins/datetimepicker/
datetimepicker플러그인을 다운로드 받을수 있는 사이트 주소입니다.

DateTimePicker 사이트 스크린샷

상단에 보이는 download (zip) 를 클릭하시면 다운로드가 가능합니다.
다운을 받아서 압출을 풀게 되면 다음과 같이 뭔가 많은 파일들이 보이실꺼에요~

DateTimePicker 다운로드 파일 내역

여기에서 저희가 필요한 파일은 2~3개 뿐이랍니다.
폴더를 통째로 업로드 해서 사용하셔도 되구요 필요한 파일만 업로드 하시면 됩니다.

<link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.css"/ > <script src="/jquery.js"></script> // jQuery를 이미 로딩해서 사용중이라면 제외하셔도 됩니다. <script src="/build/jquery.datetimepicker.full.min.js"></script>

위에 보시는 코드와 같이 필요한 파일들을 설정해주시구요~
이제 input에 클릭 이벤트를 걸어줘야겠죠?

//HTML <input id="datetimepicker" type="text" > //Javascript $('#datetimepicker').datetimepicker();

너무나도 간단한거 아닌가요?
물론 기본 셋팅으로 사용할때는 datepicker와 마찬가지로 한줄만으로 사용가능합니다.

간단하게 몇가지 옵션들만 보여드릴께요~~

1. 시간만 표시하고 시간 형식 지정해주기

jQuery('#datetimepicker2').datetimepicker({ datepicker:false, format:'H:i' // 시 분만 표시 });

2. 특정 날짜 선택 못하게 막기

jQuery('#datetimepicker9').datetimepicker({ onGenerate:function( ct ){ jQuery(this).find('.xdsoft_date.xdsoft_weekend') .addClass('xdsoft_disabled'); }, weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], timepicker:false });

3. 선택할수 있는 시간 직접 지정하기

jQuery('#datetimepicker5').datetimepicker({ datepicker:false, allowTimes:[ '12:00', '13:00', '15:00', '17:00', '17:05', '17:20', '19:00', '20:00' ] });

4. 페이지 내에 달력 삽입하고 사용언어를 한국어로 설정하기

jQuery('#datetimepicker3').datetimepicker({ format:'d.m.Y H:i', inline:true, lang:'kr' });

이것들 외에도 많은 옵션들이 있어요~~

뭔가 살짝 아쉬운 Datepicker를 대체해줄만한 플러그인으로 괜찮은것 같아요~ 시간 선택이 필요하신 분들은 참고하셔서 멋진 홈페이지 만드시기 바랍니다.^^