Jquery Datepicker + Fullcalendar：将 datepicker 选择的日期传递到 fullcalendar答案

【问题标题】：Jquery Datepicker + Fulcalendar : Pass datepicker selected date into fulcalendarJquery Datepicker + Fullcalendar：将 datepicker 选择的日期传递到 fullcalendar
【发布时间】：2014-02-19 10:37:44
【问题描述】：

我正在尝试在一个类似 http://edifyzone.net/docs/cal.png 的接口中一起实现 datepicker 和 fulcallendar。

当我在 datepicker 插件中单击一个日期时，我想显示该选定日期的 fulcallendar 视图。

当我点击一个日期时，我想设置 theDate 全局变量，所以我可以在 eventResources 部分下的 fulcallendar 代码中使用它作为我的 selectedDate 参数（我将此值发布到 json-events）。

由于某种原因，theDate 全局变量没有更新。即使我在 datepicker 插件的 onSelect 回调中设置了 theDate 变量，它也始终显示初始值。

但是如果我点击一个单元格，它会显示更新（正确）的值。（参见 fulcalendar select 回调函数。我正在提醒 theDate 变量）

我该如何解决这个问题？有人可以帮我吗？我的要求是将 theDate 值发布到 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>

【问题讨论】：

标签： javascript jquery datepicker fullcalendar global

【解决方案1】：

我这样解决了这个问题，

我将 fullCallender 脚本放在 DatePicker 的 onSelect 函数中，

....
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
.....

【讨论】：