jQuery Datepicker beforeShowDay仅在第一次单击后才起作用
我在beforeShowDay遇到问题。
当我的页面加载时，直到我点击日历中的一天，我突然显示的日期才会突出显示。 此外，如果我单击下个月按钮并返回原始月份，则“选定”日期将按预期突出显示。
因此，只有在日历的初始绘制时，日期才会突出显示，因为我已经编程了它们。 日历中的任何单击都会自行修复。
我错过了一个init选项吗？ 请参阅下面的代码示例。 我的测试url在受保护的目录中，用户/测试/测试通过。 看看右栏底部的迷你卡。 切换到下个月，然后回来查看我的问题。 请注意5月份突出显示的日期。 此外，请注意，在发生点击之前，“年份”下拉列表也会丢失。
http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list
代码：
$(document).ready(function(){ // get the current date var today = new Date(); var m = today.getMonth(), d = today.getDate(), y = today.getFullYear(); // Need list of event dates for THIS month only from database. // Declare 'dates' var before adding "beforeShowDay" option to the datepicker, // otherwise, highlightDays() does not have the 'dates' array. dates = []; fetchEventDays(y, m+1); $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, setDate: today, inline: false }); $('#datepicker').datepicker('option', 'onChangeMonthYear', fetchEventDays); $('#datepicker').datepicker('option', 'beforeShowDay', highlightDays); $('#datepicker').datepicker('option', 'onSelect', getday); // ------------------------------------------------------------------ // getday // ------------------------------------------------------------------ function getday(dateText, inst) { $('#content').load('http://www.mydomain/eventmgr.cgi?do=view_day;date='+dateText+' #eventMgr_content', function() { alert('Load was performed. '+dateText); }); } // ------------------------------------------------------------------ // fetchEventDays // ------------------------------------------------------------------ function fetchEventDays(year, month) { var paramStr ='?do=get_event_dates&yr=' + year + '&mo=' + month; $.get('/eventmgr-ajax.cgi'+ paramStr, function(data) { var recur_dates = data.split(','); for(var i = 0; i < recur_dates.length; i++) { var date_parts = recur_dates[i].split('-'); dates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2])); } // This causes dates with events to highlight on initial draw, but // when clicking to the next month, it switches back to orig month. // $('#datepicker').datepicker('option', {}); // Refresh }); } // ------------------------------------------------------------------ // highlightDays // ------------------------------------------------------------------ function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if ((dates[i].getTime() == date.getTime())) { return [true, 'highlight']; } } return [true, '']; } });
谢谢@kingjiv你是100％正确的。 日历在get请求完成之前显示。 我尝试使用when方法，但无法异步获取日期。 基本上我必须在日历显示之前突出显示日期，所以我不得不使用async: false （不是true）。
我已经包含了我的完整代码，演示了如何使用beforeShowDay选项突出显示从数据库中提取的多个事件。 使用asyc: false修复了突出显示的日期未在初始绘制中突出显示的问题。 还包括用于改变细胞背景颜色的css。
仍有一个小问题，’年’下拉菜单没有显示在初始绘图上，但我已经确认这只发生在FireFox 4中。任何点击日历都会导致显示年份菜单。 Safari在初始绘制时正确显示年份菜单。
我无法看到jQuery.when将如何提供帮助（看起来它不会推迟日期选择器中的事件）但我设法通过禁用选择器来避免async = false，然后在ajax回调中收到数据时刷新
var available_days = []; var data = get_selected(); var today = new Date(); data['year'] = today.getFullYear(); data['month'] = today.getMonth() + 1; $.get('{% url views.get_availability %}', data, function(get_data) { $("#datepicker").datepicker("destroy"); available_days = get_data['available_days']; $("#datepicker").datepicker({ onChangeMonthYear: function(year, month, inst) { $("#datepicker").datepicker("disable"); available_days = []; data['year'] = year; data['month'] = month; $.get('{% url views.get_availability %}', data, function(get_data) { available_days = get_data["available_days"]; $("#datepicker").datepicker("refresh"); $("#datepicker").datepicker("enable"); } ); }, beforeShowDay: function(date) { return [$.inArray(date.getDate(), available_days) >= 0, '']; }, onSelect: function(dateText, inst) { showTimes(dateText, data); }, dateFormat: "dd-mm-yy", }); } );
我看不到你的例子，因为我被提示输入用户名和密码。 但是，请参阅下面我认为正在发生的事情。
$.get只是制作AJAX get请求的简写。 AJAX是异步的，意味着你调用它并且它不等待响应。 所以基本上，可能发生的是在获取请求完成之前显示日历。
我可以通过两种方式解决这个问题。 一种方法是将你的get转换为完整的ajax调用并设置async : true 。
http://api.jquery.com/jQuery.ajax/
另一种选择（可能是更好的选择）将在when使用。 When基本上允许你在做任何其他事情之前等待ajax请求完成。 这允许它仍然是异步的，但确保不会过早地执行依赖代码。 这样，可以在ajax调用和从属代码之间执行其他操作。