datepicker 월별 선택으로 바꾸기

jsp에 설정된 선언한 상태. foundation-datepicker임을 주의

 

<link href="<c:url value='/js/foundation/foundation.min.css'/>">
<script src="<c:url value='/js/foundation/foundation.min.js'/>"></script>
<link href="<c:url value='/js/foundation/foundation-datepicker.min.css'/>" rel="stylesheet">
<script src="<c:url value='/js/foundation/foundation-datepicker.min.js'/>"></script>
<link href="<c:url value='/js/foundation/foundation-icons/foundation-icons.css'/>" rel="stylesheet">
<script src="<c:url value='/js/foundation/locale/foundation-datepicker.ko.js'/>"></script>

 

 

---

 

      $(function(){
            
            var nowTemp = new Date();
            var now = new Date(nowTemp.getFullYear(),  nowTemp.getMonth(), nowTemp
                        .getDate(), 0, 0, 0, 0);
            
            var checkin = $('#startDate').fdatepicker({
                  format : 'yyyy-mm',
                  pickTime : false,
                  language : 'ko',
                  onRender : function(date) {
                  }
            }).on('changeDate', function(ev) {
//                if (ev.date.valueOf() > checkout.date.valueOf()) {
//                      var newDate = new Date(ev.date)
//                      newDate.setDate(newDate.getDate() + 1);
//                      checkout.update(newDate);
//                }
                  $('#endDate')[0].focus();
            }).data('datepicker');
            
            var checkout = $('#endDate').fdatepicker({
                  format : 'yyyy-mm',
                  pickTime : false,
                  language : 'ko',
                  onRender : function(date) {
                        return date.valueOf() < checkin.date.valueOf() ?  'disabled' : '';
                  }
            }).on('changeDate', function(ev) {
            }).data('datepicker');
      });

 

---

 

일별 달력이 아닌 월별 달력으로 바꾸기 위해서는 input 태그에 start-view, min-view속성을 추가해줘야 한다.

 

<input type="text" class="onetp130" name="searchStartDate" id="startDate" value="<c:out value='${statisticsSearchVO.searchStartDate}'/>" readonly="readonly" data-start-view="year" data-min-view="year" />
<em class="cuponiter"><img src="<c:url value='/images/common/cldicon.png'/>" alt="달력" id="dp1" onclick="startImg();" ></em>  ~
 
<input type="text" class="onetp130" name="searchEndDate" id="endDate" value="<c:out value='${statisticsSearchVO.searchEndDate}'/>" readonly="readonly" data-start-view="year" data-min-view="year" >
<em class="cuponiter"><img src="<c:url value='/images/common/cldicon.png'/>" alt="달력" id="dp2" onclick="endImg();" ></em>

 

 

 

 

 

 

 

 

 

 

 

참고

 

http://foundation-datepicker.peterbeno.com/#limited-example

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#beforeshowyear