웹개발
Category
JSP/Servlet
ASP
ASP.NET
PHP
웹디자인
Category
Photoshop
Illustrator
Flash
클라이언트 스크립트
Category
●
Javascript Example
Javascript
CSS3
HTML5
데이타 베이스
Category
MySQL
MSSQL
커뮤니티
Category
공지사항
개발자마당
엔지니어마당
자유마당
플래쉬게임
여행과정보
질문과 답변
Category
웹개발 질문과답변
디자인 질문과답변
자료실
Category
이미지 자료실
개발 자료실
클럽
Category
자동차클럽
하늘소리
공이랑
Javascript Example
Javascript
CSS3
HTML5
Javascript Example
제 목
[CALENDAR] 팝업 카렌더 II
작성자
운영자
등록일
200808090115649
조회수
25,358
심플한 팝업 카렌더 자바스크립트 소스입니다.
Calendar
Hide
<script language="JavaScript"> <!-- var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var days = new Array("S", "M", "T", "W", "T", "F", "S"); today = new getToday(); var element_id; function getDays(month, year) { // Test for leap year when February is selected. if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28; else return daysInMonth[month]; } function getToday() { // Generate today's date. this.now = new Date(); this.year = this.now.getFullYear() ; // Returned year XXXX this.month = this.now.getMonth(); this.day = this.now.getDate(); } function newCalendar() { var parseYear = parseInt(document.all.year [document.all.year.selectedIndex].text); var newCal = new Date(parseYear , document.all.month.selectedIndex, 1); var day = -1; var startDay = newCal.getDay(); var daily = 0; today = new getToday(); // 1st call if ((today.year == newCal.getFullYear() ) && (today.month == newCal.getMonth())) day = today.day; // Cache the calendar table's tBody section, dayList. var tableCal = document.all.calendar.tBodies.dayList; var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear() ); for (var intWeek = 0; intWeek < tableCal.rows.length; intWeek++) for (var intDay = 0; intDay < tableCal.rows[intWeek].cells.length; intDay++) { var cell = tableCal.rows[intWeek].cells[intDay]; // Start counting days. if ((intDay == startDay) && (0 == daily)) daily = 1; // Highlight the current day. cell.style.color = (day == daily) ? "red" : ""; if(day == daily) { document.all.todayday.innerText= "Today: " + day + "/" + (newCal.getMonth()+1) + "/" + newCal.getFullYear() ; } // Output the day number into the cell. if ((daily > 0) && (daily <= intDaysInMonth)) cell.innerText = daily++; else cell.innerText = ""; } } function getTodayDay() { document.all[element_id].value = today.day + "/" + (today.month+1) + "/" + today.year; //document.all.calendar.style.visibility="hidden"; document.all.calendar.style.display="none"; document.all.year.selectedIndex =100; document.all.month.selectedIndex = today.month; } function getDate() { // This code executes when the user clicks on a day // in the calendar. if ("TD" == event.srcElement.tagName) // Test whether day is valid. if ("" != event.srcElement.innerText) { var mn = document.all.month.selectedIndex+1; var Year = document.all.year [document.all.year.selectedIndex].text; document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/" +Year; //document.all.calendar.style.visibility="hidden"; document.all.calendar.style.display="none"; } } function GetBodyOffsetX(el_name, shift) { var x; var y; x = 0; y = 0; var elem = document.all[el_name]; do { x += elem.offsetLeft; y += elem.offsetTop; if (elem.tagName == "BODY") break; elem = elem.offsetParent; } while (1 > 0); shift[0] = x; shift[1] = y; return x; } function SetCalendarOnElement(el_name) { if (el_name=="") el_name = element_id; var shift = new Array(2); GetBodyOffsetX(el_name, shift); document.all.calendar.style.pixelLeft = shift[0]; // - document.all.calendar.offsetLeft; document.all.calendar.style.pixelTop = shift[1] + 25 ; } function ShowCalendar(elem_name) { if (elem_name=="") elem_name = element_id; element_id = elem_name; // element_id is global variable newCalendar(); SetCalendarOnElement(element_id); //document.all.calendar.style.visibility = "visible"; document.all.calendar.style.display="inline"; } function HideCalendar() { //document.all.calendar.style.visibility="hidden"; document.all.calendar.style.display="none"; } function toggleCalendar(elem_name) { //if (document.all.calendar.style.visibility == "hidden") if(document.all.calendar.style.display=="none") ShowCalendar(elem_name); else HideCalendar(); } --> </script> <style> .today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold} .days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center} .dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt} </style> <FORM name=myForm> <INPUT id=MyDate name=MyDate size=15> <a href="JavaScript:;" onClick="toggleCalendar('MyDate')">Calendar</a> </form> <TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4"> <TBODY> <TR> <TD colSpan=7 vAlign=center> <!-- Month combo box --> <SELECT id=month onchange=newCalendar()> <SCRIPT language=JavaScript> // Output months into the document. // Select current month. for (var intLoop = 0; intLoop < months.length; intLoop++) document.write("<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]); </SCRIPT> </SELECT> <!-- Year combo box --> <SELECT id=year onchange=newCalendar()> <SCRIPT language=JavaScript> // Output years into the document. // Select current year. for (var intLoop = 1900; intLoop < 2028; intLoop++) document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop); </SCRIPT> </SELECT> </TD> </TR> <TR class=days> <!-- Generate column for each day. --> <SCRIPT language=JavaScript> // Output days. for (var intLoop = 0; intLoop < days.length; intLoop++) document.write("<TD>" + days[intLoop] + "</TD>"); </SCRIPT> </TR> <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center> <!-- Generate grid for individual days. --> <SCRIPT language=JavaScript> for (var intWeeks = 0; intWeeks < 6; intWeeks++) { document.write("<TR>"); for (var intDays = 0; intDays < days.length; intDays++) document.write("<TD></TD>"); document.write("</TR>"); } </SCRIPT> <!-- Generate today day. --></TBODY> <TBODY> <TR> <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD> <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD> </TR> </TBODY> </TABLE>
0
1
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
번호
제목
글쓴이
추천
조회
날짜
238
[SELECT] SELECT BOX에서 선택된 OPTION VALUE 와 TEXT 가져오기
운영자
18 /
8
82995
2008-08-09
237
[TIME] 앞으로 남은 날짜를 계산해줍니다.
운영자
0 /
0
23857
2008-08-09
236
[TIME] 타이머 자바스크립트
운영자
0 /
0
23809
2008-08-09
235
[CALENDAR] 팝업 카렌더 II
운영자
0 /
1
25358
2008-08-09
234
[TEXT] 텍스트 하이라이트 효과
운영자
0 /
0
31072
2008-08-09
233
[TEXT] 자연스럽게 좌-우측으로 페이딩 아웃되는 스크롤 텍스트
운영자
0 /
1
24062
2008-08-08
232
[CALENDAR] 심플한 달력!
운영자
0 /
0
24514
2008-08-07
231
[IMAGE] 파일 업로드시 이미지 미리보기
운영자
0 /
17
28928
2008-08-04
230
[TABLE] 마우스 오버시 테이블이 페이드 인 아웃됩니다!
운영자
2 /
0
24899
2008-08-04
229
[CALCULATOR] 심플한 계산기
운영자
0 /
0
24527
2008-08-01
228
[PASSWORD] 패스워드를 입력해야만 페이지를 볼수 있습니다.
운영자
0 /
0
26444
2008-07-31
227
[TEXT] 폼안에서 글자가 타이핑 됩니다.
운영자
0 /
0
24375
2008-07-30
226
[WINDOW] 브라우저 흔들기
운영자
0 /
0
24075
2008-07-29
225
[TABLE] 테이블 가로라인 이동
운영자
0 /
0
24878
2008-07-28
224
[TEXT] 텍스트가 페이딩 롤오버 됩니다.
운영자
0 /
0
23977
2008-07-26
223
[LINK] 링크된 텍스테에 마우스를 올리면 색상이 깜빡거립니다.
운영자
0 /
0
23766
2008-07-25
222
[TABLE] 테이블 소트시키기 II
운영자
0 /
0
24096
2008-07-21
221
[FILE] 버튼을 누르면 첨부파일 입력창 갯수가 늘어납니다.
운영자
0 /
0
23701
2008-07-20
220
[TOOLTIP] 말풍선 툴팁!
운영자
1 /
9
29803
2008-07-17
219
[TABLE] 드래그 & 드롭 테이블
운영자
0 /
4
27979
2008-07-08
218
[MENU] 슬라이딩 메뉴
운영자
0 /
0
33196
2008-07-07
217
[TABLE] 테이블 하이라이트 효과
운영자
0 /
0
24693
2008-07-05
216
[MENU] 네이버 콤보 스타일 (토글 리스트 메뉴)
운영자
0 /
0
26918
2008-07-04
215
[INPUT BOX] 정규식을 이용한 공백(SPACE) 체크하기
운영자
2 /
3
65647
2008-07-03
214
[POPUP] 간단한 풍선도움말
운영자
0 /
0
23644
2008-07-02
[1]
[2]
[3]
[4]
[5]
6
[7]
[8]
[9]
[10]
제목
내용
제목+내용
작성자