[JQuery] JQuery를 이용한 달력

티스토리 뷰

IT 이야기/프로그래밍

[JQuery] JQuery를 이용한 달력

하늘과 나 2013. 9. 10. 15:29

웹페이지를 프로그래밍 하다보면 년,월,일 등의 날짜를 입력해야 할 필요가 있는데요. 그런 때 달력이 필요하죠? 그런데 달력을 직접 만들자니 그렇고... 또 인터넷에 있는 소스를 또 그대로 가져다 쓰자니 또 그렇고 여러가지 고민이 되었습니다.

그런데 JQuery에서 제공하는 Datepicker라는 녀석을 이용하니 금방 되더라구요.

디자인은 투박하지만 달력으로의 기능은 문제없으니 간단하게 사용해주면 될 것 같네요.

Datepicker라고 해서 소스가 길 것 같다구요? 소스도 간단합니다.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
 $(function() {
  $("#datepicker").datepicker();
 });
</script>
</head>
<body>
 <p>
  Date: <input type="text" id="datepicker" />
 </p>
</body>
</html>

위의 소스를 그대로 복사 & 붙여넣기 하시면 JQuery를 이용한 간단한 달력이 완성됩니다.

소스 응용하기

위의 소스를 조금만 응용해 볼까요?

위에 보이는 실행 결과와 조금은 다른 화면임을 알 수 있는데요.

년도와 월을 콤보박스 형태로 선택할 수 있고 월과 요일이 한글로 나오네요. 소스코드를 어떻게 수정하면 되는지 아래의 소스를 보시기 바랍니다.

<script type="text/javascript">
 $(function() { 
  $(".datepicker").datepicker({
	dateFormat: 'yymmdd',
	monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
	 changeMonth: true, //월변경가능
     changeYear: true, //년변경가능
	 showMonthAfterYear: true, //년 뒤에 월 표시
  });
 });
</script>

더 자세한 정보는 아래의 페이지를 참고하세요.

http://jqueryui.com/datepicker/

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[PHP] commit, rollback 예제 (0)	2013.10.14
[HTML] 수정가능한 SELECT 태그(Editable 'Select' element) (0)	2013.09.23
아직도 몰라? 웹혁명을 가져온 부트스트랩 이야기 (0)	2013.09.19
[JQUERY] INPUT 박스에 기본값 넣어주고 마우스 클릭시 초기화해주는 소스 (2)	2013.09.17
[JAVASCRIPT] 오늘 요일 구하기, 오늘이 무슨 요일인지 출력하기 (0)	2013.09.16
무료 HTML5, CSS3, JAVASCRIPT 자료 받는 방법 (2)	2013.09.09
비주얼 스튜디오 작업그룹 복구하기 (0)	2013.09.09
자바스크립트로 클립보드 내용 자동으로 지우기 (0)	2013.08.30
[HTML] FRAMESET, FRAME, iFRAME 태그의 속성 정리 (0)	2013.07.15
[C언어 강좌] 전처리기 지시자 (0)	2013.06.11

공유하기 링크

페이스북
카카오스토리
트위터

김영대 정말 감사드립니다 잘배웠습니다. 2013.12.31 10:49
댓글주소 수정/삭제 댓글쓰기
하늘과 나 글 남겨 주셔서 고맙습니다. 2015.07.23 13:19 신고
댓글주소 수정/삭제
김준기 안녕하세요, 좋은글 감사드립니다.ㅎㅎ 궁금한점이 생겨서 댓글을 남깁니다. 혹시 이 친구를 저 텍스트박스를 클릭해야만 달력이나오는게 아닌, 가만히 뒀을때에도 달력이 뜨게끔
수정할 수 있을까요?? 2016.09.12 20:04
댓글주소 수정/삭제 댓글쓰기
하늘과 나 <input type="text" id="datepicker" onfocus></p>

이렇게 onfocus를 추가해 주시면 됩니다.^^ 2016.09.13 22:58 신고
댓글주소 수정/삭제
김준기 답변 정말 감사합니다!!
<input type="text" id="datepicker" onfocus></p> 로 댓글달아주셨는데,
</p>로 닫아주셨는데 위 소스에 p를 여는 구간이없어서... 질문 다시 드립니다 ㅠㅠ
텍스트박스없이 달력만 바로 뜨게끔 할 수 있을까요?? 2016.09.15 12:15
댓글주소 수정/삭제
김준기 제가 이상한 소스보고 p가 없다고 했네요;; ㅋㅋ 죄송합니다 ㅠㅠ
아까 질문에서 그 부분을 제외하고 텍스트 박스 없이 바로 화면에 출력할 수 있을까요?? 2016.09.15 12:34
댓글주소 수정/삭제
하늘과 나 <input type="text" id="datepicker" autofocus />
이렇게 하시면 자동으로 달력이 보입니다^^ 2016.09.15 16:01 신고
댓글주소 수정/삭제
봉이 감사합니다!!!! 2016.10.20 12:05
댓글주소 수정/삭제 댓글쓰기
압둘 이걸 봐도... 사용을 못하는 제가 답답하네요... ㅠㅠ
어디서부터 시작해야하는지 모르겠어요...
플러그인 다운은 어디서 받는건가요??? ㅠㅠ
2017.02.17 18:52
댓글주소 수정/삭제 댓글쓰기
하 복사가 안되네요 ; 2017.04.17 21:04
댓글주소 수정/삭제 댓글쓰기