如何使用jQuery的datepicker突出显示日期

下一步是不仅要突出显示某些日期，而且要根据用户先前在其他输入中选择的内容(以相同形式)动态地进行处理，因此我使用ajax来检索日期突出显示到目前为止，这是我的代码(不完整).$(function() { $('.datepicker').datepicker({ dateFormat : 'yy-mm-dd' });});function fillDates() { $('.datepicker').datepicker({ beforeShowDay: function( date ) { var highlight = dates[date]; if( highlight ) { return [true, 'highlight', highlight]; } else { return [true, '', '']; } } });}function getDates() { $.ajax({ type : "POST", dataType: "text", url : "ajaxFindDates", data : {departure:$('#departure option:selected').val(), arrival:$('#arrival option:selected').val()}, success : function(data) { var dateStr = JSON.parse(data); var dates=[]; for (var i = 0; i < dateStr.length; i++) { date=new Date(dateStr[i]); dates.push(date); } fillDates(dates); } , error : function(data) { alert("Problem!" ); } });} <select>的值更改时，将调用功能getDates().我尝试使用浏览器开发人员工具进行调试，并且似乎从未执行过beforeShowDay中定义的功能.任何帮助将不胜感激！谢谢.解决方案首先，当ajax处于成功状态时，您需要销毁datepicker实例，然后再次创建它以触发beforeShowDay./p>您可以致电:$('.datepicker').datepicker('destroy');然后，您通过发出一条语句检查dates数组中是否存在日期:var highlight = dates[date];换句话说，您检查键，但是在创建dates数组时，您只需push()将日期指向创建简单数字索引的数组:dates.push(date);如果不进行任何更改，我认为您将永远找不到它们.您应该更改在数组中查找元素的方式，或者将其添加到数组中的方式.这是小提琴.我在那儿嘲笑ajax请求.请记住，我还将从服务器接收的日期的格式更改为mm/dd/yyyy(2015/09/09).使用注释中提供的格式，最终数组中的索引不相同. I'm using Jquery UI datepicker to allow a user to fill a date input by selecting a date out of a displayed a calendar.So far, everything works as expected : http://jsfiddle.net/Aut9b/374/Then, I wanted to highlight certain dates, to help the user choose, so I looked into the beforeShowDay option which makes that possible. Here is the demo : http://jsfiddle.net/Aut9b/375/The next step is not only to highlight certain dates but to do it dynamically, based on what the user had previously selected in other inputs (in the same form), so I have used ajax in order to retrieve the dates to highlightThis is my (incomplete) code so far.$(function() { $('.datepicker').datepicker({ dateFormat : 'yy-mm-dd' });});function fillDates() { $('.datepicker').datepicker({ beforeShowDay: function( date ) { var highlight = dates[date]; if( highlight ) { return [true, 'highlight', highlight]; } else { return [true, '', '']; } } });}function getDates() { $.ajax({ type : "POST", dataType: "text", url : "ajaxFindDates", data : {departure:$('#departure option:selected').val(), arrival:$('#arrival option:selected').val()}, success : function(data) { var dateStr = JSON.parse(data); var dates=[]; for (var i = 0; i < dateStr.length; i++) { date=new Date(dateStr[i]); dates.push(date); } fillDates(dates); } , error : function(data) { alert("Problem!" ); } });}The function getDates() is called when the value of the <select> changes.I have tried to debug using the browser developer tool and it seems that the function defined in the beforeShowDay is never executed.Any help will be much appreciated!Thanks. 解决方案 First of all, when ajax gets in success state, you need to destroy datepicker instance and then create it again in order to trigger beforeShowDay.You can do it by calling: $('.datepicker').datepicker('destroy');Then, you are checking if date exists in your dates array with sush a statement:var highlight = dates[date];In other words, you check the key, but when creating dates array you just push() dates to array making simple numeric indexes:dates.push(date);If keep it without changes, I think that you will never find them. You should change the way you find elements in array, or the way you add them into the array.Here is the fiddle. I have mocked ajax request there. Keep in mind that I have also changed the format of the dates recived from the server to mm/dd/yyyy(09/09/2015). With the format that you have provided in your comments, the indexes in final array where not identic. 这篇关于如何使用jQuery的datepicker突出显示日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！