728x90
반응형
SMALL
*기본설정
-기본으로 설정하기(datepicker 달력)
-input type의 유동성(text를 쓰냐 date를 쓰냐!)
이 부분은 Datepicker 달력을 기본으로 사용하기 위해서든 응용으로 사용하기위해서든 쪼금 잘 살펴봐야 할 점이다 ㅇㅅㅇㅋㅋ
만약기본적인 퍼블이나 js 또는 html 같은 개발에서는 text를 많이 쓰는 것을 선호하나 jsp나 spring boot같이 컨테이너 형태나 기본틀로
개발하는 프로젝트같은 경우에는 date를 쓰는 게 좋다!
왜냐하면 가끔 jsp나 spring의 경우 기본경로 같은게 틀려서 jquery cdn주소나 라이브러리를 넣는데도 text가 안먹히는 경우가 있다.
그럼 이런 경우엔 별로 안중요하게 여기는 부분이라 text보다는 date를 쓰는 것이 좋다!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
일자: <input type="date" id="datepicker">
<script>
$("#datepicker").datepicker();
</script>
</body>
</html>
*응용설정
-datepicker 별 옵션 설정(응용설정)
-input type 유동성2(기본설정의 유동성과 같다고 보시면 되며, 옵션으로 주었기 때문에 유동성2라고 함!)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
<!--datepicer 버튼 롤오버 시 손가락 모양 표시-->
.ui-datepicker-trigger{cursor: pointer;}
<!--datepicer input 롤오버 시 손가락 모양 표시-->
.hasDatepicker{cursor: pointer;}
</style>
</head>
<body>
일자: <input type="date" id="datepicker">
<script>
$(function() {
//input을 datepicker로 선언
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd' //Input Display Format 변경
,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
,changeYear: true //콤보박스에서 년 선택 가능
,changeMonth: true //콤보박스에서 월 선택 가능
,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트
,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트
,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});
//초기값을 오늘 날짜로 설정
$('#datepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
});
</script>
</body>
</html>
jquery ui datepicker 달력 소스코드는 간단하기 때문에 input type을 text를 쓸 것인가 date를 쓸 것인가가 중요한 점이라고
생각하시면 된다!!! ㅇㅋㅂㄹ뿅!!!! ㅇㅁㅇㅋㅋㅋ
-참고 링크
jquery ui datepicker사이트 - https://its-easy.tistory.com/12
728x90
반응형
LIST
'IT 관련,, > Java관련 언어들' 카테고리의 다른 글
| [springboot/JAVA] PDF 파일 텍스트 읽고 다운로드 하기! (0) | 2023.02.19 |
|---|---|
| [WEB/node.js] node.js nodemon 설치 (0) | 2022.02.09 |
| [프론트엔드/React] 리액트 React 설치와 개발환경 셋팅을 해보장!! (2) | 2021.11.07 |
| [Javascript/SweetAlert창] alert창 대신 SweetAlert2창을 써보자!! (0) | 2021.09.18 |
| [WEB/PHP]php를 이용한 팝업창 취소하면 다른 페이지로 이동시키기!! (0) | 2021.02.06 |