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
위 방식으로 input에 해당 소스를 직접적으로 넣으시면 안됩니다.
참고 주소를 드릴테니 확인후 수정해서 적용해 보시길 바랍니다.
알려주신 페이지에는 제가 원하는 복수날짜 관련 내용은 없는거 같네요....
<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>
이런것도 있네요
<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>
wr_3은 다른 게시판에서 사용하고 있는 것 같습니다. DB 테이블에는 wr_10까지 잡혀 있고요
아래와 같은 코드가 다른 게시판 글쓰기 페이지 있는데...중복으로 사용할 수는 없는거죠?
<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>
wr_3을 평형으로 쓰고 계시네요
안쓰는 다른 값으로 넣으시면 될 듯 해요
원문의 코드 두개가 이상하게 섞여 버리네요 따로 올립니다.
<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>
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"]);
});
<input type="date" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" required class="frm_input full_input required datepicker" placeholder="시공일자">
