向jquery ui datepicker单元添加文本的方法？

Question

我需要在JQuery UI日期选择器的某些日期显示自定义文本，更确切地说，可以为某些日期呈现特定的价格。 我的想法是使用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，但也应该为popup 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从@年代的的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 { 
} 

与日期选择对象

初始化如果您需要在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);