제이쿼리 달력 만드는 코드
제이쿼리 달력 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 함수 </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
/* 여기에 CSS 스타일을 추가하세요 */
</style>
<script>
jQuery(function(){
jQuery('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], //달력의 월 부분 Tooltip
dayNamesMin: ['일','월','화','수','목','금','토'], //달력의 요일 텍스트
dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
});
});
jQuery(function(){
jQuery('#datepicker1, #datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], //달력의 월 부분 Tooltip
dayNamesMin: ['일','월','화','수','목','금','토'], //달력의 요일 텍스트
dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
});
});
jQuery(function(){
jQuery('#datepicker1, #datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], //달력의 월 부분 Tooltip
dayNamesMin: ['일','월','화','수','목','금','토'], //달력의 요일 텍스트
dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
});
});
</script>
</head>
<body>
<!--
Client IP is <%=request.getRemoteAddr()%> and Server IP(Port) is <%=request.getServerName()%>(<%=request.getServerPort()%>)
-->
<p>일정을 선택해주세요. <input type="text" id="datepicker"></p>
<p>조회기간을 선택해주세요~
<input type="text" id="datepicker1">
<input type="text" id="datepicker2">
</p>
<form id="frmMain" method="POST">
<div class="container">
</body>
</html>
가급적 min버전을 사용하는 것이 좋다고 한다.
최소한의 용량으로 파일을 확보하기 위한 것 =>배포용이기 때문에 따로 추후 수정할 이유가
없어서 그런 것.
난독화하기 위한 min버전.[https://velog.io/@khd/jquery-달력위젯-datepicker-사용법](https://velog.io/@khd/jquery-%EB%8B%AC%EB%A0%A5%EC%9C%84%EC%A0%AF-datepicker-%EC%82%AC%EC%9A%A9%EB%B2%95)check box와 radio
<input type="checkbox">와 <input type="radio">의 주요 차이점은 다음과 같습니다:
1)선택 방식:
체크 박스 (<input type="checkbox">): 여러 옵션 중 사용자가 필요한 만큼 선택할 수 있습니다. 각 체크 박스는 독립적으로 작동하며, 여러 옵션을 동시에 선택할 수 있습니다.
라디오 버튼 (<input type="radio">): 여러 옵션 중에서 단 하나만 선택할 수 있습니다.
라디오 버튼은 하나의 그룹으로 구성되어 있으며,
그룹 내에서 한 번에 하나의 옵션만 선택할 수 있습니다.
2)그룹 구성:
체크 박스 (<input type="checkbox">): 각 체크 박스는 독립적으로 작동하며
그룹으로 묶이지 않습니다. 즉, 여러 체크 박스는 하나의 그룹으로 간주되지 않습니다.
라디오 버튼 (<input type="radio">): 라디오 버튼은 그룹으로 묶여 있어야 합니다.
그룹 내에서는 하나의 라디오 버튼만 선택할 수 있습니다.
따라서 하나의 그룹 내에서는 동일한 name 속성 값을 가진 라디오 버튼이 있어야 합니다.
3)사용 목적:
체크 박스 (<input type="checkbox">): 여러 개의 선택 옵션 중 사용자가 필요한 옵션을
선택할 때 사용합니다.
예를 들어, 사용자가 원하는 옵션을 모두 선택할 수 있는 "다중 선택" 용도로 사용됩니다.
라디오 버튼 (<input type="radio">): 여러 개의 선택 옵션 중에서 단 하나의 옵션을
선택할 때 사용합니다.
예를 들어, 성별을 선택하는 라디오 버튼은 사용자가 "남성" 또는 "여성" 중에서 하나만
선택할 수 있도록 합니다.
이러한 차이점으로 인해 체크 박스와 라디오 버튼은 서로 다른 상황에서 사용됩니다.<script>
$(function(){
$("#wrap p:hidden").css({
"display":"block",
"background":"#ff0"
});
var z1 = $("#zone1 :selected").val( );
console.log(z1);
var z2 = $("#zone2 :checked").val( );
console.log(z2);
var z3 = $("#zone3 :checked").val( );
console.log(z3);
});
</script>
<body>
<!--
Client IP is <%=request.getRemoteAddr()%> and Server IP(Port) is <%=request.getServerName()%>(<%=request.getServerPort()%>)
-->
<div id="wrap">
<p>내용1</p>
<p style="display:none">내용2</p>
<p>내용3</p>
</div>
<form action="#">
<p id="zone1">
<select name="course" id="course">
<option value="opt1">옵션1</option>
<option value="opt2" selected>옵션2</option>
<option value="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby1" value="독서"> 독서
<input type="checkbox" name="hobby2" value="자전거"> 자전거
<input type="checkbox" name="hobby3" value="등산" checked> 등산
</p>
<p id="zone3">
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female" checked> 여성
</p>
</body>이 코드는 jQuery를 사용하여 HTML 요소들을 선택하고 조작하는 JavaScript 코드입니다.
코드를 하나씩 살펴보면 다음과 같습니다:
1. `$(function(){...});`: 이 코드는 문서가 준비되면(즉, DOM이 로드된 후) 함수를 실행
이것은 jQuery의 단축 문법으로 문서의 준비 이벤트를 대기하는 것과 같습니다.
2. `$("#wrap p:hidden").css({...});`: `#wrap` 요소 내의 숨겨진(`:hidden`)
모든 `<p>` 요소를 선택하고, 선택된 요소들의 CSS를 변경합니다.
선택된 요소들의 `display` 속성을 `block`으로 설정하고,
`background` 속성을 `#ff0`(노란색)으로 설정합니다.
3. `var z1 = $("#zone1 :selected").val( );`:
`#zone1`이라는 셀렉트 박스 내에서 선택된 옵션의 값을 가져옵니다.
이 값은 `z1` 변수에 저장됩니다. 이 코드는 선택된 옵션의 값을 가져오는 것으로 보입니다.
4. `console.log(z1);`: `z1` 변수의 값을 콘솔에 출력합니다.
이는 선택된 옵션의 값이 콘솔에 출력됩니다.
5. `var z2 = $("#zone2 :checked").val( );`: `#zone2`라는 체크 박스 그룹 내에서
체크된 첫 번째 체크 박스의 값을 가져옵니다.
이 값은 `z2` 변수에 저장됩니다.
이 코드는 체크된 첫 번째 체크 박스의 값을 가져오는 것으로 보입니다.
6. `console.log(z2);`: `z2` 변수의 값을 콘솔에 출력합니다.
이는 체크된 첫 번째 체크 박스의 값을 콘솔에 출력됩니다.
7. `var z3 = $("#zone3 :checked").val( );`: `#zone3`라는 체크 박스 그룹 내에서
체크된 첫 번째 체크 박스의 값을 가져옵니다.
이 값은 `z3` 변수에 저장됩니다.
이 코드는 체크된 첫 번째 체크 박스의 값을 가져오는 것으로 보입니다.
8. `console.log(z3);`: `z3` 변수의 값을 콘솔에 출력합니다.
이는 체크된 첫 번째 체크 박스의 값을 콘솔에 출력됩니다.
이 코드는 문서가 로드된 후 실행되며,
해당하는 HTML 요소들을 선택하고 그 값들을 콘솔에 출력하는 것으로 보입니다.<p style="display:none">내용2</p> =>p:hidden 적용됨.
$("#wrap p:hidden").css({
"display":"block",
"background":"#ff0"
});