웹개발 유지보수중 가장 귀찮니즘이 발동하는 작업이
날짜 검색일겁니다. 자바스크립트로 달력을 만들자니 실력 여부를 떠나서 귀찮고,
jQuery 를 사용하자니 꼴랑 날짜 검색 폼 하나 때문에 jQuery.js 파일을 몇줄이나 삽입하고 스크립트
구문짜서 우겨넣고 디자인 꾸밀려면 좀 짜증이 나죠...
이럴때는 그냥 인터넷에서 캘린더 스크립트 하나 받아서 우겨넣고 마무리 하는게 의뢰자나 개발자나, 기획자
모두의 정신건강을 위하는 길입죠~
인터넷에 돌아다니는 캘린더 자바스크립중 좀 이쁘면서도 간결하고, 소스의 저작권 문제 걱정없이 쓸만한게
코드플랙스 (http://jscalendar.codeplex.com) 에서 공개한 Calendar.js 입니다.
모양도 아주 간결한게 꽤 이쁘지요. 소스보면 간단하게 디자인 수정도 가능하구요!
GNU 라이센스를 따르고 있어서 저작권 문제 없이 사용이 가능하구요,
이런 이유에서인지 구글링 조금만 해보면 국내에서도 꽤 소개가 되어서 관련
포스팅이 꽤 됩니다. 나름대로 수정해서 공개해놓은 블로그도 제법 있구요.
문제는 이게 인터넷익스플로러에서는 잘되는데 크롬(사파리 포함)이나 파이어폭스에서는 안되는다는게
문제입니다. 요즘같이 크로스 브라우징을 추구하는 시대에 이건 좀 문제가 아닐수 없죠.
그래서 제가 인터넷 익스플로러와 크롬(사파리 포함), 파이어폭스에서도 사용이 가능 하게 조금
수정해 봤습니다.
혹시라도 나름 필요하신분들이 계실것 같아서 소스와 함게 이렇게 포스팅해봅니다.
calendar.js 의 사용법은 무척 간단해서 input 폼에 onlick 이벤트로만 끝이납니다.
<input type="text" id="txtDate" value="" onclick="fnPopUpCalendar(txtDate,txtDate,'yyyy/mm/dd')"class='text_box1'>
<script type="text/javascript" src="./calendar.js"></script>
꽤 쉽죠....^^;
하지만 주의사항이 몇가지 있는데 html header 부분에 아래와 같이 DTD 규정을 적용해 주셔야 한다는 겁니다.
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
또한 익스플로러 호환을 위해서 아래와같이 IE 에뮬을 선언하시면 작동되지 않습니다.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
소스는 => calendar.zip
아래는 브라우저별 테스트 화면 입니다.
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 1일차 변수 (0) | 2016.02.24 |
|---|---|
| [jQuery] Ajax의 흐름과 예제 (0) | 2016.01.19 |
| event.stopPropagation(), event.preventDefault () 이해하기 (0) | 2016.01.19 |
| [Ajax] 기본 예제 소스 + 설명 (0) | 2015.12.18 |
| [Ajax] jquery 실시간 중복체크 (0) | 2015.12.18 |
