본문 바로가기
IT

jQuery DatePicker option 한글 표기와 특정일 선택 안되도록 셋팅

HandSoya 2014. 12. 10. 20:45

 

 

jquery datepicker 를 사용하다 보면

간혹 한글로 표기 하고 싶은데 잘 안될때가 있더라구요 ㅠㅠ

 

그래서 약간의 꼼수를 썼답니다.

 datepicker option 중에 monthNames 에 "년" 글자를 붙여서 사용한거죠 !!

그런데 여기서 2번째 문제가 또 발생하네요..

그건 바로 실제 년도와 "년" 사이가 넓어서 보기 불편하다는거죠..

그래서 최후의 꼼수로 style css로 제어를 조금 했답니다.

 

 <style type="text/css">
  .ui-datepicker-year { margin-right: -5px; }
 </style>

 

 

이렇게 하니 아래 화면처럼 나오네요

 

 

 

 

그리고 특정일은 선택이 안되도록 하고 싶은데 사용하는 로직도 같이 넣어봤답니다.

특정일 선택 부분을 제외 하고 싶으면 datepicker option 중에 ", beforeShowDay: no_view"  이 부분 빼시면 됩니다.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE> jQuery DatePicker </TITLE>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 <style type="text/css">
  .ui-datepicker-year { margin-right: -5px; }
 </style>
 <script type="text/javascript">
 $(document).ready(function(){
  $(".date_format").datepicker({    
  showMonthAfterYear:true
  , monthNames:['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월']
  , monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
  , dayNamesMin: ['일','월','화','수','목','금','토']
  , weekHeader: 'Wk'
  , dateFormat: 'yy-mm-dd'
  , beforeShowDay: no_view

  });      

  // 특정일 선택 막기
  function no_view(date) {
   var tmp_chk = 1;
   //매월 12월 21일은 선택 안되도록
   if(date.getDate()  == "21" && date.getMonth() == "11"){
    tmp_chk =0;
   }
   return [tmp_chk != 0, ''];
  }


 });
 </script>
</HEAD>

<BODY>

<input type="text" class="date_format" />

</BODY>
</HTML> 

 

AWS S3에 업로드했습니다.

필요하신 분은 소스보기 해서 긁어가셔요 ^^

http://s3-ap-northeast-1.amazonaws.com/soyeontest/jquery/datepicker.html

 

 

 

 

'IT' 카테고리의 다른 글

넥서스7 안드로이드 롤리팝 업데이트 이스터에그 게임  (1) 2014.12.11
AWS S3 Bucket 파일 업로드 후에 permission 오류  (0) 2014.12.10
aws S3 사용하기 bucket 생성과 권한  (0) 2014.12.04
php 나머지 계산 mod 계산 예제  (0) 2014.11.27
스마트폰 케이스 아이페이스 iFace First Class  (0) 2014.11.08

'IT' Related Articles

티스토리툴바