在jQuery UI datepicker中显示日期旁边的其他文本 [英] Display additional text alongside dates in jQuery UI datepicker
问题描述
我正在使用jQuery UI datepicker,我希望在日期旁边的日期单元格中显示其他文本。这是理想的行为:
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:
不幸的是,操纵日期使用 .text()
和 .html()
函数的单元格会破坏日期选择器功能。请参阅以下演示并尝试使用datepicker。请注意,当您选择日期时(i)自定义文本消失(ii)更改月份会破坏日历并让您登录未定义的NaN月份:
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/
有吗一个解决方案?
推荐答案
那么,你可以修补jQuery UI并冒险破坏新版本的代码,或者你可以使用文档回调将自定义数据 - *
属性添加到datepicker并使用 CSS伪元素:
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">
这是一个更新的< a href =https://jsfiddle.net/aLdx4L0y/6/> JSFiddle
Side注意:我不确定你的演示中有哪些功能被破坏,但由于这个解决方案使用了文档化的回调和CSS,我相信它不太可能在将来破坏任何东西而不是猴子修补
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屋!