[Jquery] 날짜 달력 datepicker(데이트티커)
블로그에 있는 datepicker는 안되는것이 많아서 사용할 일이 있어서 완성한것 올립니다.
jquery는 버전이 다르면 안될 수 있으니 버전을 맞우는것이 중요하며 아래 순서도 중요합니다.
jquery를 이용하기 때문에 jquery-ui가 아래에 있어야 한다는 것입니다.
그리고 jquery-ui 압축 파일을 받으면 아래와 같이 CDN 이용하지 않고 사이트에 올려 놓고 사용할 수 있으며 압축 파일 안에 아래 cdn 링크 걸린 모든 파일과 더불어 필요한 다른 파일들도 같이 모두 들어 있습니다. 같이 사용되는 jquery 도 별도 디렉토리에 있습니다.
△ 아래 달력 datepicker(데이트티커)
minDate 사용하면 적용한 이전의 날짜는 선택 할 수 없도록 나오지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery datepicker</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- https://jqueryui.com/ -->
<!-- https://releases.jquery.com/ui/ -->
<!--
소스보기 하면 아래 js 파일 위치를 얻을 수 있다.
-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script language='Javascript'>
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년',
showButtonPanel: true,
currentText: '당일 날짜' ,
closeText: '닫기',
minDate: new Date(2020, 0, 1)
});
$(function() {
$("#date_text1, #date_text2").datepicker();
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<br><br><br>
</div>
</div>
<form class="row g-3" action='<?=$PHP_SELF?>' method='get'>
<div class="col-5">
<p>
<label for="date_text1" class="form-label">시작일</label>
<input type="text" class="form-control" id="date_text1" value="" name="date_text1" autocomplete="off" placeholder="시작일">
<label for="date_text2" class="form-label">종료일</label>
<input type="text" class="form-control" id="date_text2" value="" name="date_text2" autocomplete="off" placeholder="종료일">
</p>
</div>
<div class="col-1">
<input class="btn btn-primary" type="submit" value="결과 조회">
</div>
<div class="col-6">
</div>
</form>
<div class="row">
<div class="col-12">
<br><br>
</div>
</div>
</div>
</body>
</html>
