jquery-ui-datepicker - 哪种方式向jquery ui datepicker单元格添加文本？

Question

我需要在Jquery UI datepicker 上的某些日期显示自定义文本，更准确地说，是为某些日期呈现特定价格。
我的想法是使用beforeShowDay在此类日期的标题中附加特定的价格，然后在beforeShow中检查每个td并将标题的文本放入单元格中。例子:

var m, d, y, checkDate, specificPrice = '';    
var specificPrices = {"2013-3-8":"300 EUR", "2013-2-26":"263 EUR"}

$('#my-datepicker').datepicker({
    beforeShowDay:     function checkAvailable(date) {
    m = date.getMonth();
    d = date.getDate();
    y = date.getFullYear();
    checkDate = y + '-' + (m+1) + '-' + d;
    if(specificPrices[checkDate]){
        specificPrice = specificPrices[checkDate];
    }else{
        specificPrice = '';
    }
    return [true, "", specificPrice];
},
    beforeShow: function(elem, inst){
        $('table.ui-datepicker-calendar tbody td', inst.dpDiv).each(function(){
            var calendarPrice = $(this).attr('title');
            if(calendarPrice != undefined){
                $(this).find('a').append('<span class="calendar-price">' + calendarPrice + '<span>');
            }
        });         
    }
});

这将在第一个日历渲染(更改月/年之前)和内联日历上渲染价格。

我需要在非嵌入式日历以及任何月份/年份更改中显示价格。

我尝试了其他一些变体，并尝试使用onChangeMonthYear，但到目前为止没有成功。

感谢您的关注，欢迎提出您的想法。

Answer 1

我遇到了相同的情况，并认为我将发布用于嵌入式datepicker的解决方案，但也应该适用于弹出式datepicker。

首先，您不能修改由datepicker插件创建的表格单元的内容。这样做会破坏其核心功能，因为它会读取单元格内容以生成选定的日期字符串。因此，必须使用纯CSS添加内容。

创建您的日期选择器

$('#DatePicker').datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //The calendar is recreated OnSelect for inline calendar
    onSelect: function (date, dp) {
        updateDatePickerCells();
    },
    onChangeMonthYear: function(month, year, dp) {
        updateDatePickerCells();
    },
    beforeShow: function(elem, dp) { //This is for non-inline datepicker
        updateDatePickerCells();
    }
});
updateDatePickerCells();

创建插入单元格内容的方法

function updateDatePickerCells(dp) {
    /* Wait until current callstack is finished so the datepicker
       is fully rendered before attempting to modify contents */
    setTimeout(function () {
        //Fill this with the data you want to insert (I use and AJAX request).  Key is day of month
        //NOTE* watch out for CSS special characters in the value
        var cellContents = {1: '20', 15: '60', 28: '100'};

        //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a)
        $('.ui-datepicker td > *').each(function (idx, elem) {
            var value = cellContents[idx + 1] || 0;

            /* dynamically create a css rule to add the contents with the :after                         
               selector so we don't break the datepicker functionality */
            var className = 'datepicker-content-' + value;

            if(value == 0)
                addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); // 
            else
                addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');

            $(this).addClass(className);
        });
    }, 0);
}

添加一种方法来动态创建新的CSS规则，同时跟踪已创建的规则。

var dynamicCSSRules = [];
function addCSSRule(rule) {
    if ($.inArray(rule, dynamicCSSRules) == -1) {
        $('head').append('<style>' + rule + '</style>');
        dynamicCSSRules.push(rule);
    }
}

最后，新单元格内容的一些默认CSS

.ui-datepicker td a:after
{
    content: "";
    display: block;
    text-align: center;
    color: Blue;
    font-size: small;
    font-weight: bold;
}  

这适用于基本内容，但是如果您想使用“$ 20.95”(包含CSS特殊字符)之类的东西，则可以使用内容的md5哈希值创建 className变量。

编辑
JSFiddle从@yuga的JSFiddle修改而来，包含了唯一类名的MD5哈希，用于更复杂的内容。