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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- jQuery UI CSS파일 --> <!-- jQuery 기본 js파일 --> <!-- jQuery UI 라이브러리 js파일 --> </head> <body> <h2>JQuery 달력</h2> <h2>Date Picker</h2> <p>선택일 : <input type="text" id="date"></p> <p>textbox를 클릭하면 <String>캘린더</String> 표시</p> 연도:<p id="year"></p> 월:<p id="month"></p> 일:<p id="day"></p> 요일:<p id="mydate"></p> <script type="text/javascript"> $(function () { $("#date").datepicker({ dateFormat:"yy/mm/dd", dayNamesMin:["일","월","화","수","목","금","토"], monthNames:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"], onSelect:function(d){ alert(d+" 선택되었습니다"); var arr=d.split("/"); var year=arr[0]; var month=arr[1]; var day=arr[2]; $("#year").text(year); $("#month").text(month); $("#day").text(day); //요일 가져오기 //데이터를 먼저 가져오고 (숫자로 넘어옴) var date=new Date($("#date").datepicker({dateFormat:"yy/mm/dd"}).val()); //일요일 0~ alert("date:"+date.getDay()); week=new Array("일","월","화","수","목","금","토"); $("#mydate").text(week[date.getDay()]); } }); }); </script> </body> </html> | cs |