Jquery datepicker突出显示从ajax获取的特定日期

时间:2013-11-27 10:57:30

标签: jquery ajax jquery-ui-datepicker

我在页面中使用了jquery日期选择器(http://api.jqueryui.com/datepicker/)。在页面中,我有一个程序列表的下拉列表。在下拉列表旁边有一个文本框,点击它将打开日期选择器。我从下拉列表中选择任何程序并触发ajax来获取程序日期。当用户单击文本框时,我能够在日期选择器中高亮显示这些日期。

现在我的问题是,如果我选择任何日期可用的程序,那么数据标签会突出显示。对于其他程序第二次没有可用的程序日期仍然突出显示。我使用beforeShowDay()方法来突出显示特定日期。

我能够调试的主要问题是我的情况下的javascript变量“datesArray”在每次调用ajax时都没有在beforeShowDay()方法内重置。

这是我的代码

$("#resourceId").change(function(){
            var datesArray=[];
            $.ajax({
                url : '/aptcare/getscheduledate.action',
                data : "resourecid="+$(this).val(),
                method : "POST",
                async : false,
                success : function(data) {  
                    strarr=$.trim(data).split(",");
                    for(var i =0;i<strarr.length;i++){
                        datesArray.push(strarr[i]);
                    }                       
                }
            })

            console.log("dates array: "+datesArray);

             $('.datepicker').datepicker({
                    dateFormat: "dd/mm/yy",        
                    changeMonth: true,
                    changeYear: true,
                    beforeShowDay: function(date) {
                            var theday = date.getDate() +'/'+ (date.getMonth()+1)+ '/' +date.getFullYear();
                            console.log("to highlight array: "+datesArray);
                            return [true,$.inArray(theday, datesArray) >=0?"Highlighted":''];
                    }
            }); 

})

以下是控制台日志

对于第一个案例日期数组:“12/11 / 2013,12 / 11 / 2013,22 / 11/2013”​​

并突出显示阵列:“12/11 / 2013,12 / 11 / 2013,22 / 11/2013”​​

对于第二种情况日期数组:

并突出显示阵列:“12/11 / 2013,12 / 11 / 2013,22 / 11/2013”​​

即“dateArray”未重置。

谢谢你的帮助。

0 个答案:

没有答案