[jQuery/Javascript] 달력 datepicker v2.2

- jQuery를 이용해서 만든 달력입니다.

:: 특징   - 현재 날짜는 파란색으로 표시   - 선택된 날짜는 빨간박스로 표시   - 날짜형식에 맞게 입력 후 텍스트박스 클릭시 해당 날짜로 이동    - IE,Chrome,FF,Safari 지원  :: 업데이트 내용   - mask처리를 통한 기본입력시 편의기능 추가   - css파일을 선언하는 함수호출을 따로 호출할 필요없도록 수정

 

:: 사용방법
 
-  js파일 import후 아래와 같이 javascript로 호출하여 사용 
-  id(필수)외에 입력하지 않으면 모두 기본값으로 설정됩니다.

- jquery.mask.min.js 를 import 해주셔야 정상 동작합니다.

- 달력 이미지 경로가 제 tistory에 올려져있는 이미지로 링크되어있으니 실제 사용하실때에는 경로를 변경해서 사용하시기 바랍니다. 

view source

print?

01.<strong>//파일2개 import

02.<script type="text/javascript" charset="utf-8" src="calendar_beans_v2.2.js"></script>

03.<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script><script type="text/javascript" charset="utf-8" src="jquery.mask.min.js"></script>


04.일달력 <input id="cal1">     

05.월달력 <input id="cal2">

06. 

07.<script type="text/javascript">        

09./*

10.id      :텍스트박스Id   // *필수

11.type    :day,mon        // 둘중 하나입력      ,기본값> 일달력 출력

12.min :xxxx           // 최소년도 4자리 입력  ,기본값> 2000

13.max :xxxx           // 최대년도 4자리 입력  ,기본값> 현재년도

14.splitKey:'-','/'        // 달력 구분값           ,기본값> '-'

15.todayYN :'y','n'        // today 표시             ,기본값> 안보여주기

16.iconYN  :'y','n'        // 달력그림표시여부     ,기본값> 안보여주기

17.iconUrl :fullUrl 혹은 해당위치 상대경로 url'  ,기본값> jquery 사이트 달력

18.*/

19.initCal({id:"cal1",type:"day",today:"y",icon:"y"});        

20.initCal({id:"cal2",type:"mon",today:"y",icon:"y"});

21.</script>

22.</strong>

calendar_beans_v2.2.zip