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";}'); //&nbsp;
            else
                addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');

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

添加一种方法来动态创建新的CSS规则，同时跟踪已创建的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＆＃39; （包含CSS特殊字符），您可以使用内容的md5哈希来创建className变量。

修改 {@ 3}}从@ yuga的JSFiddle修改为包含更复杂内容的唯一类名的MD5哈希值。

Answer 2

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

我的解决方案更新了普雷斯顿：

修改后的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 {
}

使用datepicker对象进行初始化

如果你需要updateDatePickerCells函数中的datepicker对象，这是一种在初始化时获取它的方法。（基于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);

将文本添加到jquery ui datepicker单元格的方法是什么？

2 个答案: