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

Question

I Hope someone can help me...

I use JQuery-UI Datepicker to show my booking calendar. I already success for show datepicker with different date colour. But i need to show my booking price on every date in jquery-ui datepicker. How can i do it? is there any example? This is my code :

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];
    }
}

This function call at beforeShowDay in DatePicker. This code just for show different colour in datepicker.

Answer 1

Not knowing which version you are using, I am basing this on the github version https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js line 1560 in the _generateHTML() function:

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

adding in your pricing should be easy, just stick in some extra markup:

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

I would recommend extending the datepicker and creating your own so that updates do not interfere with customizations, a good article can be found here: http://bililite.com/blog/extending-jquery-ui-widgets/

Good luck!