Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

두개의 datepicker를 이용한 기간 입력 제한

11 키키™ 4 990 1 0

http://naminsik.com/blog/3272 게시글을 참고하여 만들며 버그를 잡긴했지만 예기치않은 문제들이 있을 수 있어요.

IE9부터 지원하는 Array.reduce 프로퍼티를 사용해서 IE8이하에서는 관련 부분을 수정하셔야합니다.


write.skin.php 상단에 datepicker 호출이 되었는지 점검하시고 없으면 상단에 추가해주시면 됩니다

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');


입력폼 wr_1 , wr_3 의 class에 datepicker 추가

  <div class="form-group">
   <label class="col-sm-2 control-label hidden-xs" for="wr_1">진행기간<strong class="sound_only">필수</strong></label>
   <div class="col-sm-10 col-xs-12">
    <div class="control-label input-group input-group-sm " style="text-align:center;">
     <label style="font-weight:100;">시작 <input type="text" name="wr_1" value="<?php echo  $write['wr_1'] ?>" id="wr_1" class="form-control input-sm datepicker required" style="width:80%;float:right;margin-top:-5px;"></label>
     <label style="font-weight:100;">종료 <input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" class="form-control input-sm datepicker required" style="width:80%;float:right;;margin-top:-5px;"></label>
    </div>
   </div>
  </div>


아래의 스크립트는 write.skin.php 제일 아래쪽 보시면 자바스크립트코드 있는 곳에 넣으시면 됩니다.


disabledDates 배열에 선택 제한 일자들을 순서되로 나열합니다.

var disabledDates = ['2017-12-21','2017-12-25','2017-12-26','2017-12-27','2018-01-05','2018-01-10','2018-01-11','2018-01-15'];

Array.sort를 사용하지 않았기에 필요하다 싶으면 소스 수정을 하시면 됩니다.

제한 일자가 없다면 반드시 var disabledDates = []; 배열이다 선언해주세요.

 $(function(){
  var rangeDate = 31;
  var setSdate, setEdate;
  var disabledDates = ['2017-12-21','2017-12-25','2017-12-26','2017-12-27','2018-01-05','2018-01-10','2018-01-11','2018-01-15'];
  $("#wr_1").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", showButtonPanel: true, minDate:0, maxDate:"+30D",
        beforeShowDay: function(date){
               var string = $.datepicker.formatDate('yy-mm-dd', date);
               return [ disabledDates.indexOf(string) == -1 ]},
        onSelect: function(selectDate){
          var cdate = (disabledDates.length>0)? disabledDates.reduce( function (accumulator, current) { 
          return (selectDate < current && (accumulator < selectDate && accumulator < current ) ) ? current : accumulator;
          }) : '0000-00-00';
         if(cdate < selectDate) {
          cdate = selectDate;
          rangeDate = 31;
         }else{
          rangeDate = -1;
         }
         var ctxt = cdate.split("-");        
         var edate = new Date(parseInt(ctxt[0]), parseInt(ctxt[1]), parseInt(ctxt[2]));        
          edate.setMonth(edate.getMonth() -1);
          edate.setDate(edate.getDate() + rangeDate );
         $('#wr_3').val('');
         $('#wr_3').datepicker('option', {
          minDate: selectDate,
          beforeShow : function () {
           $("#wr_3").datepicker( "option", "maxDate", edate );
           setSdate = selectDate;
           console.log(setSdate);
          } 
         });
        }
       });
  $("#wr_3").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", showButtonPanel: true, minDate:0 });
 });



입력 제한 일자들은 선택이 불가능합니다.  2018.01.07을 선택.


1.7일 이후 첫번째 입력제한 일자인 01-10 전날까지 입력 받을 수 있습니다.

4 Comments
17 사노라면 2017.12.21 20:04  
소중한 팁 감사합니다
잘 사용하겟읍니다
7 이니스프리 2017.12.22 00:16  
유용한 팁이네요 ^^
정말 감사합니다!
즐겁고 뜻깊은 연말 되세요~
8 아이케 01.03 09:05  
이걸 어제 왜 못봤을까요 ㅠㅠ
글쓰기에 달력넣느라 구글링 했었는데 아미나에 다 있네요 ㅎㅎㅎ
1 레드 02.27 15:29  
요거 테스트해봐야겠군요..의뢰게시판처럼 유용할듯 하군요
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory NaverBand