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

jQuery의 datepicker를 아시나요?

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

 

jQuery DatePicker 사용 예

 

바로 이건데요~ 저기 input 박스를 클릭하면 이렇게 날짜를 선택할수 있게 나옵니다.

하지만...이름 그대로 날짜만 선택할 수 있어요.... 가끔 시간도 같이 선택해줘야 할때가 있는데....

 

그래서 다른 플러그인을 써야합니다~ 바로 datetimepicker 죠~

이름에서부터 알 수 있듯이 날짜와 시간을 선택할 수 있게 해주는 플러그인 입니다~

 

https://xdsoft.net/jqplugins/datetimepicker/

 

datetimepicker 플러그인을 다운로드 받을수 있는 사이트 주소입니다.

 

DateTimePicker 사이트

 

상단에 보이는 download (zip) 를 클릭하시면 다운로드가 가능합니다.

다운을 받아서 압출을 풀게 되면 다음과 같이 뭔가 많은 파일들이 보이실꺼에요~

 

DateTimePicker Plugin 파일 구조

 

여기에서 저희가 필요한 파일은 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를 대체해줄만한 플러그인으로 괜찮은것 같아요~

시간 선택이 필요하신 분들은 참고하셔서 멋진 홈페이지 만드시기 바랍니다.^^