반응형
jquery.datetimepicker.full.min.js
0.06MB
jquery.datetimepicker.min.css
0.02MB
jQuery의 datetimepicker를 이용하면 날짜 선택시 시작일과 종료일 선택 시, 시작일이 종료일보다 뒤로 선택되거나 반대로 종료일이 시작일보다 빠른 날짜로 선택되는 것을 방지할 수 있습니다.
위에 첨부한 두 파일을 다운로드해서 사용해주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- datetimepicker 스타일 적용 -->
<link rel="stylesheet" href="jquery.datetimepicker.min.css">
<title>Document</title>
</head>
<body>
<div>
시작일자 <input type="text" id="startDate" autocomplete="off">
</div>
<div>
종료일자 <input type="text" id="endDate" autocomplete="off">
</div>
</body>
<!-- 제이쿼리 import -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- datetimepicker import -->
<script type="text/javascript"
src="jquery.datetimepicker.full.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
fn_egov_init_date()
})
function fn_egov_init_date(){
var $startDate = $('#startDate');
var $endDate = $('#endDate');
$startDate.datetimepicker({
timepicker: false,
lang: 'ko',
format: 'Y-m-d',
scrollMonth: false,
scrollInput: false,
onShow: function (ct) {
this.setOptions({
maxDate: $endDate.val() ? $endDate.val() : false
})
},
});
$endDate.datetimepicker({
timepicker: false,
lang: 'ko',
format: 'Y-m-d',
scrollMonth: false,
scrollInput: false,
onShow: function (ct) {
this.setOptions({
minDate: $startDate.val() ? $startDate.val() : false
})
}
});
}
</script>
</html>반응형
'Publishing > JavaScript&jQuery' 카테고리의 다른 글
| [JavaScript] 전개 연산자(Spread Operator) (0) | 2022.01.30 |
|---|---|
| [JavaScript] var, let, const 차이 정리 (0) | 2022.01.28 |
| [jQuery] 제이쿼리 validate를 이용한 폼 검증 (0) | 2021.10.14 |
| [JavaScript] 자바스크립트 키보드 단축키 이벤트 (0) | 2021.10.12 |