如何使用jQuery的datepicker突出显示日期 [英] How to highlight dates with jQuery's datepicker

问题描述

我正在使用 jQuery UI datepicker 来允许用户通过从显示的日历中选择日期来填写日期输入.

到目前为止，一切都按预期进行: http://jsfiddle.net/Aut9b/374/

然后，我想突出显示某些日期，以帮助用户选择，所以我研究了beforeShowDay选项，这使这成为可能.

beforeShowDayType:函数(日期日期)

Default: null

A function that takes a date as a parameter and must return an array with:

  [0]: true/false indicating whether or not this date is selectable 
  [1]: a CSS class name to add to the date's cell or "" for the default presentation 
  [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

这里是演示: http://jsfiddle.net/Aut9b/375/

下一步是不仅要突出显示某些日期，而且要根据用户先前在其他输入中选择的内容(以相同形式)动态地进行处理，因此我使用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.

beforeShowDayType: Function( Date date )

Default: null

A function that takes a date as a parameter and must return an array with:

  [0]: true/false indicating whether or not this date is selectable 
  [1]: a CSS class name to add to the date's cell or "" for the default presentation 
  [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

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 highlight

This 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突出显示日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！