Jquery Datepicker + Fulcalendar：通過datepicker選擇日期到fulcalendar

我試圖在一個界面中實現datepicker和fulcallendar，像這樣http://edifyzone.net/docs/cal.png。Jquery Datepicker + Fulcalendar：通過datepicker選擇日期到fulcalendar

當我點擊datepicker插件中的日期時，我想顯示該選定日期的fulcallendar視圖。

當我點擊日期，我想設置theDate全局變量，這樣我就可以使用它fulcallendar代碼中下eventResources部分作爲我selectedDate參數（我張貼此值JSON -events）。

由於某種原因theDate全局變量未更新。總是顯示初始值，即使我設置theDate變量內的onSelect回調在datepicker插件。

但是，如果我點擊一個單元格，它會顯示更新的（正確的）值。（請參閱完整日期選擇回調函數。我提醒日期變量）

我該如何解決這個問題？有人可以幫我嗎？我的要求是將Date值發佈到json-events文件中。非常感謝。

<script> 
     $(function() { 

      window.theDate = new Date();//Get todays date and initialize 
      //I tried var theDate = new Date(); but didn't work 


     //datepicker 
     var datepicker = $("#datepicker").datepicker({ 
      dateFormat: 'yy-m-d', 
      inline: true, 
      numberOfMonths: [2, 1], 
      showButtonPanel: true, 
      onSelect: function(dateText, inst) { 

       var date = $(this).datepicker('getDate'), 
         day = date.getDate(), 
         month = date.getMonth(), 
         year = date.getFullYear(); 

       window.theDate = dateText;// Set the theDate value onDate select 
       selected.val(dateText); 

       //set the calendar 
       calendar.fullCalendar('gotoDate', year, month, day); 

      } 
     });//end datepicker 

     //Fullcalendar 
     var calendar = $('#calendar').fullCalendar({ 
      header: {left: '',center: 'title',right: ''}, 
      select: function(start, end, allDay, event, resourceId) { 
       alert(theDate); // this alert shows the correct updated date 
      }, 
      resources: 'calendar/json-staff', 
      eventSources: [ 
       { 
        url: 'calendar/json-events', 
        type: 'POST', 
        data: { 
         //This theDate value is not being updated 
         selectedDate: theDate // get the global theDate value 
        }, 
        success: function($data) { 
         console.log($data.responseText); 
         //alert($data); 
        }, 
        error: function($data) { 
         console.log($data); 
         alert('Error: check the console! ' + $data.responseText); 
        }, 
        color: 'yellow', // a non-ajax option 
        textColor: 'black' // a non-ajax option 
       } 
      ] 
      //events: 'calendar/json-events' 
     }); 




    });//end of jquery 
</script> 

<html> 
     <table border="0" width="100%"> 
      <tr> 
       <td width="10%" valign="top"> 
        <div id="datepicker"></div> 
       </td> 
       <td valign="top"><div id='calendar'></div></td> 
      </tr> 
     </table> 
</html>

來源

2014-02-19 The Dude

我解決了這個問題，這樣，

我放置的DatePicker的ONSELECT溫控功能裏面fullCallender腳本，

.... 
onSelect: function(dateText, inst) { 

    //var d = new Date(dateText); // This line only worked for chrome ??? 
    var d = $(this).datepicker('getDate'); 

    //Fullcalendar 
    $('#calendar').empty(); //clear the initial view 
    calendar = $('#calendar').fullCalendar({ 

     //Full calendar suff here 

    }); //Fullcalendar ends 

    /*-------------------- Set the selected date ---------------------*/ 
    calendar.fullCalendar('gotoDate', d.getFullYear(), d.getMonth(), d.getDate()); 

}//on select ends 
.....

來源

2014-06-11 07:48:46

Jquery Datepicker + Fulcalendar：通過datepicker選擇日期到fulcalendar

回答

相關問題