使用JQuery-UI Datepicker在日期上顯示“價格”文本？

Question

我希望有一個人可以幫助我...

我使用JQuery-UI 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

您使用的，不知道哪一個版本，我在GitHub的版本基礎這個https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js線1560在_generateHTML（）功能：

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

添加價格應該很容易，只需加上一些額外的標記即可：

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

我建議您擴展日期選擇器並創建自己的日期選擇器，以便更新不會干擾自定義，可以在此處找到不錯的文章： http : //bililite.com/blog/extending-jquery-ui-widgets/

祝好運！