Question

我希望有人可以帮助我...

我使用JQuery-UI Datepicker来显示我的预订日历。我已经成功使用不同日期颜色的show datepicker。但我需要在jquery-ui datepicker的每个日期显示我的预订价格。我该怎么做？有什么例子吗？这是我的代码：

function checkAvailability(mydate){
    if (jResult==null)
    {
        return [true,"ui-state-notbooked"];
    }
    else
    {
        var $return=true;
        var $returnclass ="ui-state-notbooked";
        $checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
        $.each(jResult, function(key, val){     
            var date1 = $checkdate.split("-");
            var date2 = key.split("-");
            if(date1[1]==date2[1] && date1[2]==date2[2])
            {
                switch (val)
                {
                  case "red": 
                    $returnclass= "preBookedRed_class";
                    break;
                  case "blue": 
                    $returnclass= "preBookedBlue_class";
                    break;
                  case "yellow": 
                    $returnclass= "preBookedYellow_class";
                    break;
                  default: 
                    $returnclass= "preBooked_class";
                }               
            }           
        });
        return [$return,$returnclass];
    }
}

此函数在DatePicker中调用beforeShowDay。此代码仅用于在datepicker中显示不同的颜色。

Answer 1

我不知道您使用的是哪个版本，我基于_generateHTML（）函数中的github版本https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js第1560行：

'" href="#">' + printDate.getDate() + '</a>')) + '</td>';

添加您的定价应该很容易，只需坚持一些额外的标记：

'" href="#">' + printDate.getDate() + '</a>')) + '<span class="booking-price">$0.00</span></td>';

我建议扩展datepicker并创建自己的，以便更新不会干扰自定义，可在此处找到一篇好文章：http://bililite.com/blog/extending-jquery-ui-widgets/

祝你好运！

使用JQuery-UI Datepicker在日期显示“价格”文本？

1 个答案: