哪种方式将文本添加到 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 插件创建的表格单元格的内容。这样做会破坏其核心功能，因为它会读取单元格内容以生成选定的日期字符串。因此，必须使用纯 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 哈希。

Answer 2

基于@PrestonS 的回答和this post，我有一个不错的简单解决方案，不需要在标题中添加<style> 标签。

我的解决方案更新了 Preston 的：

修改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;

            /***** MAGIC! *****/

            $(this).attr('data-content', value);

            // and that's it! (oh, so easy)
        });
    }, 0);
}

使用此解决方案，您根本不需要addCSSRule 函数。

修改后的 css：

/* to target all date cells */
.ui-datepicker td > *:after {
    content: attr(data-content);  /***** MAGIC! *****/

    /* add your other styles here */
}

/* to target only allowed date cells */
.ui-datepicker td > a:after {
}

/* to target only disabled date cells */
.ui-datepicker td > span:after {
}

使用日期选择器对象初始化

如果您需要updateDatePickerCells 函数中的日期选择器对象，这里有一种在初始化时获取它的方法。 （基于this post）

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

var datepicker = $.datepicker._getInst(calendarElem[0]);
updateDatePickerCells(datepicker);