목차
접기
728x90
반응형
datepicker html 샘플 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습 노트!</title>
<!-- jquery script -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!-- datepicker script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- datepicker css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css" integrity="sha512-lCk0aEL6CvAGQvaZ47hoq1v/hNsunE8wD4xmmBelkJjg51DauW6uVdaWEJlwgAE6PxcY7/SThs1T4+IMwwpN7w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<script>
$(document).ready(function(){
testDatepicker();
});
function testDatepicker() {
$('.jq-date').datepicker({
dateFormat: 'yy-mm-dd'
});
}
</script>
<input type="text" class="jq-date">
</body>
</html>
datepicker 샘플 코드 설명
datepicker 사용에 필요한 라이브러리
datepicker 는 jquery 라이브러리를 활용한다.
<!-- jquery script -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
datepicker는 jquery를 활용해서 이용할 수 있다.
datepicker 는 jquery-ui와 jquery-ui 의 css 라이브러리를 활용한다.
<!-- datepicker script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- datepicker css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css" integrity="sha512-lCk0aEL6CvAGQvaZ47hoq1v/hNsunE8wD4xmmBelkJjg51DauW6uVdaWEJlwgAE6PxcY7/SThs1T4+IMwwpN7w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Help.
jquery-ui.min.js는 datepicker 기능을 활용하기 위한 script이다.
jquery-ui.css는 datepicker에 css 요소를 입혀주기 위해 사용하는 라이브러리이다.
datepicker 기본 설정한 이미지
datepicker의 속성과 css를 수정해서 다양하게 활용할 수 있지만, 나는 간단히 테스트해 보기 위한 용도로 기본적으로 날짜 형식만 설정해 주었다.
datepicker를 사용할 때 필요한 script는 최신 버전으로 수정을 해두었다.
(게시물 업데이트 일자 : 2024년 03월 22일, 금요일)
datepicker에 더 다양한 설정을 주는 방법은 추후 다른 게시물을 수정하거나 새로 게시하여 공유할 예정이다.
전체 샘플 코드를 참고하여 학업 및 업무에 도움이 되었으면 하는 마음으로 게시물을 수정해 본다.
728x90
반응형
LIST
'javascript' 카테고리의 다른 글
| [javascript] 부모 modal 안에 자식 modal을 닫았을 때 부모 modal로 인식하는 경우, A modal 안에 B modal 이벤트가 A modal로 인지할 때, modal 2개 이벤트 (0) | 2023.06.09 |
|---|---|
| javascript로 form을 제출하는 방법은? (0) | 2023.06.01 |
| javascript에서 현재 URL의 원하는 파라미터 값 추출하는 방법 (0) | 2023.06.01 |
| javascript에서 var, let, const 차이점을 알고 사용해보자. (0) | 2023.06.01 |
| t.has is not a function TypeError, t.has 타입 오류 (0) | 2023.05.24 |