티스토리 뷰
웹페이지를 프로그래밍 하다보면 년,월,일 등의 날짜를 입력해야 할 필요가 있는데요. 그런 때 달력이 필요하죠? 그런데 달력을 직접 만들자니 그렇고... 또 인터넷에 있는 소스를 또 그대로 가져다 쓰자니 또 그렇고 여러가지 고민이 되었습니다.
그런데 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 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- HTML
- 인터넷
- MBTI 자료
- php
- 소스코드
- C언어 소스
- MBTI 테스트
- 효과음
- 안드로이드 어플 추천
- 인터넷 익스플로러
- 안드로이드
- 예제 소스
- JavaScript
- 강의
- 강좌
- 성공
- MBTI 강좌
- 소스
- 스마트폰
- 프로그래밍
- 리뷰
- It
- MBTI
- 모토로이
- MBTI 검사
- 안드로이드 어플
- C언어
- C언어 문제
- 프로그래밍 문제
- C
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함