DatePicker 복수 날짜 선택 다시 질문 드립니다.
안녕하세요.
지난번에 질문을 드렸던 내용이지만 현재 사이트의 코드로 다시 질문을 드립니다.
저희 회사 사이트에 jquery 위젯 datepicker 를 이용해 날짜를 선택책하는 기능이 있는데
현재는 1일만 선택이 가능합니다.
이것을 datepicker의 Select a Date Range 로 복수의 날짜를 선택하는 것으로 수정하려고 합니다.

코드 샘플로 이것저것 해봤는데....기초가 없어서 잘 안되네요.
아래는 현재 날짜 입력 부분과 datepicker.php 코드 입니다.
www\skin\board\gallery\write.skin.php
<div class="bo_w_tit write_div">
<label for="wr_2" class="sound_only">시공일자<strong>필수</strong></label>
<input type="text" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" required class="frm_input full_input required datepicker" placeholder="시공일자" readonly>
</div>
www\plugin\jquery-ui\datepicker.php
<script>
jQuery(function($){
$.datepicker.regional["ko"] = {
closeText: "닫기",
prevText: "이전달",
nextText: "다음달",
currentText: "오늘",
monthNames: ["1월(JAN)","2월(FEB)","3월(MAR)","4월(APR)","5월(MAY)","6월(JUN)", "7월(JUL)","8월(AUG)","9월(SEP)","10월(OCT)","11월(NOV)","12월(DEC)"],
monthNamesShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
dayNames: ["일","월","화","수","목","금","토"],
dayNamesShort: ["일","월","화","수","목","금","토"],
dayNamesMin: ["일","월","화","수","목","금","토"],
weekHeader: "Wk",
dateFormat: "yymmdd",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: ""
};
$.datepicker.setDefaults($.datepicker.regional["ko"]);
});
</script>
조금 막연한 질문이것 같긴한데..
제가 개발자는 아니지만 공부하는 겸해서 해보려고 합니다.
고수님들의 도움 부탁 드립니다.
답변 7개 / 댓글 3개
이런것도 있네요
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="wr_2" class="date-range">
<input type="text" name="wr_3" class="date-range">
<script>
$(".date-range").daterangepicker({
autoUpdateInput: false,
locale: {
format: "YYYY-MM-DD",
daysOfWeek: ["일", "월", "화", "수", "목", "금", "토"],
monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
}
}, function(start, end) {
$("input[name=\"wr_2\"]").val(start.format("YYYY-MM-DD"));
$("input[name=\"wr_3\"]").val(end.format("YYYY-MM-DD"));
});
</script>
답변에 대한 댓글 2개
<input type="date" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" required class="frm_input full_input required datepicker" placeholder="시공일자">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="bo_w_tit write_div">
<label for="wr_2" class="sound_only"><strong>필수</strong></label>
<input type="text" name="wr_2" value="" id="wr_2" required class="frm_input full_input required datepicker" placeholder="" readonly>
<label for="wr_3" class="sound_only"><strong>필수</strong></label>
<input type="text" name="wr_3" value="" id="wr_3" required class="frm_input full_input required datepicker" placeholder="" readonly>
</div>
<script>
jQuery(function($){
$.datepicker.regional["ko"] = {
closeText: "닫기",
prevText: "이전달",
nextText: "다음달",
currentText: "오늘",
monthNames: ["1월(JAN)","2월(FEB)","3월(MAR)","4월(APR)","5월(MAY)","6월(JUN)", "7월(JUL)","8월(AUG)","9월(SEP)","10월(OCT)","11월(NOV)","12월(DEC)"],
monthNamesShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
dayNames: ["일","월","화","수","목","금","토"],
dayNamesShort: ["일","월","화","수","목","금","토"],
dayNamesMin: ["일","월","화","수","목","금","토"],
weekHeader: "Wk",
dateFormat: "yymmdd",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: ""
};
$.datepicker.setDefaults($.datepicker.regional["ko"]);
$("#wr_2").datepicker();
$("#wr_3").datepicker();
});
</script>
jQuery(function($){
$.datepicker.regional["ko"] = {
closeText: "닫기",
prevText: "이전달",
nextText: "다음달",
currentText: "오늘",
monthNames: ["1월(JAN)","2월(FEB)","3월(MAR)","4월(APR)","5월(MAY)","6월(JUN)", "7월(JUL)","8월(AUG)","9월(SEP)","10월(OCT)","11월(NOV)","12월(DEC)"],
monthNamesShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
dayNames: ["일","월","화","수","목","금","토"],
dayNamesShort: ["일","월","화","수","목","금","토"],
dayNamesMin: ["일","월","화","수","목","금","토"],
weekHeader: "Wk",
dateFormat: "yymmdd",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: ""
};
$.datepicker.setDefaults($.datepicker.regional["ko"]);
});
원문의 코드 두개가 이상하게 섞여 버리네요 따로 올립니다.
<div class="bo_w_tit write_div">
<label for="wr_2" class="sound_only">시공일자<strong>필수</strong></label>
<input type="text" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" required class="frm_input full_input required datepicker" placeholder="시공일자" readonly>
</div>
위 방식으로 input에 해당 소스를 직접적으로 넣으시면 안됩니다.
참고 주소를 드릴테니 확인후 수정해서 적용해 보시길 바랍니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.
아래와 같은 코드가 다른 게시판 글쓰기 페이지 있는데...중복으로 사용할 수는 없는거죠?
<div class="bo_w_tit write_div">
<label for="wr_2" class="sound_only">시공날짜<strong>필수</strong></label>
<input type="text" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" required class="frm_input half_input required datepicker" placeholder="시공날짜">
<label for="wr_3" class="sound_only">평형<strong>필수</strong></label>
<input type="text" name="wr_3" value="<?php echo $wr_3 ?>" id="wr_3" required class="frm_input half_input required" placeholder="평형">
</div>