在 jQuery UI datepicker 中的日期旁边显示附加文本 [英] Display additional text alongside dates in jQuery UI datepicker

问题描述

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

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

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

有解决办法吗?

解决方案

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

$(function() {$("#datepicker").datepicker({beforeShow:添加自定义信息，//---^----------- 如果默认关闭(当您使用  时)beforeShowDay:函数(日期){返回 [真，date.getDay() === 5 ||date.getDay() === 6 ?周末":工作日"];},onChangeMonthYear:添加自定义信息，onSelect: 添加自定义信息});添加自定义信息()；//如果默认打开(当你使用 
 时)});函数 addCustomInformation() {设置超时(功能(){$(".ui-datepicker-calendar td").filter(function() {var date = $(this).text();返回/d/.test(date);}).find("a").attr('data-custom', 110);//在这里添加自定义数据}, 0)}

.ui-datepicker .weekend .ui-state-default {背景:#FEA；}.ui-datepicker-calendar td a[数据自定义] {位置:相对；填充底部:10px；}.ui-datepicker-calendar td a[data-custom]::after {/*在此处设置自定义数据的样式*/内容:'$' attr(data-custom);显示:块；字体大小:小；}

<script src="//code.jquery.com/jquery-1.9.1.min.js"></脚本><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，我相信它在未来比猴子补丁更不可能破坏任何东西

I am using jQuery UI datepicker and I want to display additional text inside date cells next to the date. This is the desired behavior:

Unfortunately, manipulating date cells using .text() and .html() functions breaks the datepicker functionality. See following demo and try to use the datepicker. Notice that when you select a date (i) the custom text is gone (ii) changing months destroys the calendar and lands you on "undefined NaN" month:

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

Is there a solution?

解决方案

Well, you can monkey-patch jQuery UI and risk breaking the code with newer versions or you can use documented callbacks to add custom data-* attributes to datepicker and display them using 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">

Here's an updated JSFiddle

---

Side note: I'm not sure which functionality is broke in your demo, but since this solution is using documented callbacks and CSS, I believe it's less likely to break anything in future than monkey patching

这篇关于在 jQuery UI datepicker 中的日期旁边显示附加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！