datepicker에 이벤트로드 중

Question

전체 캘린더와 날짜 선택 도구가 동일한 페이지에 있습니다. 전체 캘린더에서 날짜, 월 또는 일을 선택한 후에 동일한 데이터를 날짜 선택 도구에로드해야합니다.

<div id="calendar"></div> 
<script type='text/javascript'> 
     $(function() { 
      var date = new Date(); 
      var d = date.getDate(); 
      var m = date.getMonth(); 
      var y = date.getFullYear(); 
      var opt={ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'agendaDay,month' 
         }, 
       weekends:false, 
       selectable: true, 
       selectHelper: true, 
       defaultView: 'agendaWeek', 
       select: function(start, end, allDay) { 
        //calendar.fullCalendar('unselect'); 

       }, 
      }; 
    $('#calendar').fullCalendar(opt); 

    $("#cworkweek").on("click",function() { 
      opt.weekends=false; 
      $('#calendar').fullCalendar('destroy'); 
      $('#calendar').fullCalendar(opt); 
      $(".datepicker").datepicker("destroy"); 
      getdate(1,5); 

    }); 
    $("#cweek").on("click",function() { 
      opt.weekends=true; 
      $('#calendar').fullCalendar('destroy'); 
      $('#calendar').fullCalendar(opt); 
      $(".datepicker").datepicker("destroy"); 
      getdate(0,6); 
    }); 
}); 
</script> 

위 코드는 전체 일정입니다. 다음은 날짜 선택 도구입니다.

<span id="startDate"></span>-<span id="endDate"></span> 
    <div class="datepicker"></div> 
    <script type="text/javascript"> 
    function getdate(sdate,edate) 
    { 
     var startDate; 
     var endDate; 
     var selectCurrentWeek = function() { 
      window.setTimeout(function(){ 
       $('.datepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active') 
      }, 2); 
     } 
     $('.datepicker').datepicker({ 
      numberOfMonths:[2,1], 
      dateFormat: 'M dd,yy', 
      onSelect: function(dateText, inst) { 
       var date = $(this).datepicker('getDate'); 
       startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()+ sdate); 
       endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + edate); 
       var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
       $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
       $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings)); 
       var d = new Date(dateText); 
       $('#calendar').fullCalendar('gotoDate', d); 
       selectCurrentWeek(); 
      }, 
      beforeShowDay: function(date) { 
       var cssClass = ''; 
       if(date >= startDate && date <= endDate) 
        cssClass = 'ui-datepicker-current-day'; 
       return [true, cssClass]; 
      }, 

     }); 
    } 
    $(function() { 
     getdate(5,1); 
    }); 
    </script> 

그래서 친절하게도 위의 코드와 같이 날짜 선택 도구를 사용하여 제안했습니다.

Answer 1

코드가 실제로 명확하지 않으므로 Jsfiddle을 사용하여 작동 예제를 표시 할 수 있습니다. 일반적으로 사용자 지정 이벤트를 트리거 할 수 있습니다. 예를 들어, 달력에서 날짜를 따기 후, 당신은 게재 할 수있는 다음 날짜 선택기에서

$('#calendar').trigger({ 
    type:"date-updated.calendar", 
    new_date: 'the-date-of-the-calendar 
}); 

어딘가에 당신이 Juqery UI 달력 구성 요소 인`

를 사용하는 경우가

$('#calendar').on("date-updated.calendar",function(ev){ 
    var new_date = ev.new_date; 
    //update your datepicker with new_date 
});