답변 3개 / 댓글 2개
채택된 답변
+20 포인트
2024-12-16 (월) 14:11:44
https://jqueryui.com/datepicker/#alt-field
from / to 를 활용하시면 가능합니다
각각 다른 datepicker 가 동작하지만, 값은 서로 연동이 가능합니다.
아래 코드를 응용해서 사용하세요
Copy
<style>
.datepicker-container {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
}
input {
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<div class="datepicker-container">
<label for="datepicker1">날짜 선택 1:</label>
<input type="text" id="datepicker1" readonly>
</div>
<div class="datepicker-container">
<label for="datepicker2">날짜 선택 2:</label>
<input type="text" id="datepicker2" readonly>
</div>
<script>
$(function() {
// 플래그 변수로 무한 루프 방지
var isUpdatingDatepicker1 = false;
var isUpdatingDatepicker2 = false;
// 첫 번째 Datepicker 초기화
$("#datepicker1").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(selectedDate) {
if (!isUpdatingDatepicker2) {
isUpdatingDatepicker1 = true;
$("#datepicker2").datepicker("setDate", selectedDate);
isUpdatingDatepicker1 = false;
}
}
});
// 두 번째 Datepicker 초기화
$("#datepicker2").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(selectedDate) {
if (!isUpdatingDatepicker1) {
isUpdatingDatepicker2 = true;
$("#datepicker1").datepicker("setDate", selectedDate);
isUpdatingDatepicker2 = false;
}
}
});
});
</script>답변에 대한 댓글 1개
2024-12-16 (월) 14:25:35
어떻게 소스 적용하셨는지 알 수 없으나, 위 소스는 "직접 테스트 한 소스"입니다.
아래 영상으로 확인해보세요
답변에 대한 댓글 1개
2024-12-16 (월) 14:02:15
clone을 활용해서 input 복사해서 하단 영역에 불러왓더니
class명이 지 마음대로 붙는데 이건 지정 못할까요?
답변을 작성하려면 로그인이 필요합니다.