在 jQuery UI 日期选择器中在日期旁边显示附加文本

Posted 2023-05-07

【中文标题】在 jQuery UI 日期选择器中在日期旁边显示附加文本

【英文标题】：Display additional text alongside dates in jQuery UI datepicker

【发布时间】：2016-06-16 09:50:56

【问题描述】：

我正在使用 jQuery UI 日期选择器，我想在日期旁边的日期单元格中显示其他文本。这是期望的行为：

不幸的是，使用.text() 和.html() 函数操作日期单元格会破坏日期选择器的功能。请参阅以下演示并尝试使用日期选择器。请注意，当您选择日期时 (i) 自定义文本消失 (ii) 更改月份会破坏日历并将您置于“未定义的 NaN”月份：

https://jsfiddle.net/salman/aLdx4L0y/

有解决办法吗？

【问题讨论】：

如果您不介意频繁触发 addCustomInformation 功能，您可以执行 this

之类的操作

【参考方案1】：

好吧，您可以对 jQuery UI 进行猴子补丁并冒险使用新版本破坏代码，或者您可以使用记录的回调将自定义 data-* 属性添加到 datepicker 并使用 CSS pseudo elements 显示它们：

$(function() 
  $("#datepicker").datepicker(
    beforeShow: addCustomInformation,
    //---^----------- if closed by default (when you're using <input>)
    beforeShowDay: function(date) 
      return [true, date.getDay() === 5 || date.getDay() === 6 ? "weekend" : "weekday"];
    ,
    onChangeMonthYear: addCustomInformation,
    onSelect: addCustomInformation
  );
  addCustomInformation(); // if open by default (when you're using <div>)
);

function addCustomInformation() 
  setTimeout(function() 
    $(".ui-datepicker-calendar td").filter(function() 
      var date = $(this).text();
      return /\d/.test(date);
    ).find("a").attr('data-custom', 110); // Add custom data here
  , 0)

.ui-datepicker .weekend .ui-state-default 
  background: #FEA;

.ui-datepicker-calendar td a[data-custom] 
  position: relative;
  padding-bottom: 10px;

.ui-datepicker-calendar td a[data-custom]::after 
  /*STYLE THE CUSTOME DATA HERE*/
  content: '$' attr(data-custom);
  display: block;
  font-size: small;

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id="datepicker">

这是更新后的JSFiddle

---

旁注：我不确定您的演示中有哪些功能被破坏，但由于此解决方案使用记录的回调和 CSS，我相信它在未来破坏任何东西的可能性都比猴子补丁小

【讨论】：

不错的方法！ （我的修补版本破坏日历小部件本身的可能性几乎为零，但当然，如果它们在内部更改某些内容，它可能会停止工作。与此不同，真的 - 它默默地假设@987654328 中总会有一个a @，我敢打赌这在任何地方都没有记录。;))

@Tomalak 实际上 - 是的，确实如此，jQuery UI 似乎并没有真正得到那么多更新（尤其是破坏性的），完全交互重写与触摸支持（2.0）是永远，今天我看到一个3年前的错误，它的版本是1.10~，3年后稳定版本只有1.11~！

没错，它在某些区域收集的灰尘不止一点。

getDay 返回 0 表示周日，6 表示周六，而不是 5

【参考方案2】：

有一个基于the accepted answer的更简单的解决方案：

beforeShowDay 函数允许我们为每个日期设置“标题”属性。我们可以使用 CSS 伪元素来显示属性。

$(function() 
  var dayrates = [100, 150, 150, 150, 150, 250, 250];

  $("#datepicker").datepicker(
    beforeShowDay: function(date) 
      var selectable = true;
      var classname = "";
      var title = "\u20AC" + dayrates[date.getDay()];
      return [selectable, classname, title];
    
  );
);

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");

.ui-datepicker td span,
.ui-datepicker td a 
  padding-bottom: 1em;


.ui-datepicker td[title]::after 
  content: attr(title);
  display: block;
  position: relative;
  font-size: .8em;
  height: 1.25em;
  margin-top: -1.25em;
  text-align: right;
  padding-right: .25em;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="datepicker"></div>

【讨论】：

非常好，这是一个漂亮的解决方案。竖起大拇指。

想一想，这种方法取决于 a) 你只想插入纯文本，而不是附加功能（例如第二个链接）和 b) 没有其他 .ui-datepicker td标题。不过，第二个可以通过使用.ui-datepicker-calendar td[title] 来克服。第一个可能是限制性的。

不错的答案。这是Codepen 链接。

【参考方案3】：

由于 jQuery UI 数据选择器非常单一，因此很难干净地增强。

我会使用猴子修补其内部功能之一，即_generateHTML。

$.datepicker._generateHTML = (function () 
    var realGenerateHtml = $.datepicker._generateHTML;
    return function (instance) 
        var html = realGenerateHtml.apply(this, arguments), $temp;
        
        if ( instance.input.is(".datepicker-price") ) 
            $temp = $("<table></table>").append(html);
            $temp.find(".ui-datepicker-calendar td a").each(function () 
                var yy = $(this).parent().data("year"),
                    mm = $(this).parent().data("month"),
                    dd = +$(this).text();

                $(this).append("<br><small class='price'>$100</small>");
            );
            html = $temp[0].innerHTML;
        
        return html;
    ;
)();

$(function() 
    $("#datepicker").datepicker();
);

.ui-datepicker .weekend .ui-state-default 
  background: #FEA;

.price 
    color: blue;

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<div id="datepicker" class="datepicker-price"></div>

【讨论】：

Monkey 修补了_generateHTML 函数...为什么我没有想到呢？

这真的完全有效吗？当我单击一个日期并单击向右或向左箭头时，它显示“未定义的 NaN”并且日期消失。如果我不点击日期框而只点击箭头，一切都很好，月份会改变。

是的，确实如此。我已经在三个浏览器中对其进行了测试。不确定它会在哪里为您显示“未定义的 NaN”？请制作一个演示该问题的 jsFiddle。

再次。制作一个演示问题的 jsFiddle 并发布链接。

【参考方案4】：

将此代码添加到您的 JS...

$('#DatePicker').datepicker(
changeMonth: true,
changeYear: true,
minDate: 0,
onSelect: function (date, dp) 
    updateDatePickerCells();
,
onChangeMonthYear: function(month, year, dp) 
    updateDatePickerCells();
,
beforeShow: function(elem, dp)  
    updateDatePickerCells();
);
updateDatePickerCells();
function updateDatePickerCells(dp) 

setTimeout(function () 

    var cellContents = 1: '20', 15: '60', 28: '$99.99';


    $('.ui-datepicker td > *').each(function (idx, elem) 
        var value = '$125';//cellContents[idx + 1] || 0;


        var className = 'datepicker-content-' + CryptoJS.MD5(value).toString();

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

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

var dynamicCs-s-rules = [];
function addCs-s-rule(rule) 
if ($.inArray(rule, dynamicCs-s-rules) == -1) 
    $('head').append('<style>' + rule + '</style>');
    dynamicCs-s-rules.push(rule);

演示链接... http://jsfiddle.net/pratikgavas/e3uu9/131/

【讨论】：

如果您只想要选定日期的文本，那么您可以在 cellContents 数组中声明它...例如var cellContents = 1: '20', 15: '60', 28: '$99.99';其中 1、15、28 是日期，20、60、99.99 是值