<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>JQuery 달력</h1>
<h2>date Picker</h2>
<p>선택일:<input type="text" id="date"></p>
<p>text박스를 클릭하면, <strong>카렌더</strong>가 표시됩니다.</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 arrDate = d.split("/");
var year = arrDate[0];
var month = arrDate[1];
var day = arrDate[2];
//숫자를 문자형으로 변환
$("#year").text(year);
$("#month").text(month);
$("#day").text(day);
//날자 구하기
var date = new Date($("#date").datepicker({dateFormant:"yy/mm/dd"}).val() );
alert("date :" + date.getDay());
//getDay 요일
var week = new Array("일","월","화","수","목","금","토");//요일 배열
$("#mydate").text(week[date.getDay()]);
}
});
});
</script>
</body>
</html>
'JQuery > JQuery 기본' 카테고리의 다른 글
| [JQuery] 우편번호 이론 만들기 예제 (0) | 2018.08.08 |
|---|---|
| [JQuery] 우편번호 사용 사이트 및 코드 (0) | 2018.08.08 |
| [JQuery] JQuert UI 사용하기 (이미지 투명도) (0) | 2018.08.07 |
| [JQuery] 기본태그 정리 (0) | 2018.08.07 |
| [JQuery] 사진 윗쪽 뒤쪽 글추가 및 div <p>테그 삭제하기. (0) | 2018.08.07 |
