jQuery UI Datepicker事件上的自定义文本 [英] Custom text on jquery ui datepicker event
问题描述
我从数据库收到一个数组,其中包含一些日期和每天的说明. 我希望显示一个jquery datepicker日历,其中指定的日期与自定义css类一起显示. 除此之外,用户应该能够单击特定日期并在不同的div元素中显示说明.
css类的第一部分正在工作,但是我无法显示说明. 这是我到目前为止的内容:
var Event = function(text, className) {
this.text = text;
this.className = className;
};
var events = {};
events[new Date("09/18/2012")] = new Event("description 1", "pink");
events[new Date("09/19/2012")] = new Event("description 2", "green");
$("#minical").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
}
else {
return [true, '', ''];
}
},
onSelect: function(dateText, inst) {
},
minDate: "-3Y",
maxDate: "+3Y",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
altFormat: "yy-mm-dd",
defaultDate: "+1w",
"showButtonPanel": true
});
<style>
.pink > a {
background-color: pink !important;
background-image:none !important;
}
.green > a {
background-color: green !important;
background-image: none !important;
}
</style>
提前谢谢
我不确定我是否理解您的需求,但是如果我理解正确,则要在另一个div中显示所选日期/事件的描述. /p>
您的onSelect
事件可能是这样的:
onSelect: function(dateText, inst) {
var event = events[new Date(dateText)];
$("#description").html(event.text);
}
I'm receiving an array from a database with some dates and a description for each day. I wish to display a jquery datepicker calendar where the specified dates are displayed with a custom css class. Besides that the user should be able to click on the specific date and get the description displayed in a different div element.
The first part with the css class is working, but I can't get the description to display. This is what I have so far:
var Event = function(text, className) {
this.text = text;
this.className = className;
};
var events = {};
events[new Date("09/18/2012")] = new Event("description 1", "pink");
events[new Date("09/19/2012")] = new Event("description 2", "green");
$("#minical").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
}
else {
return [true, '', ''];
}
},
onSelect: function(dateText, inst) {
},
minDate: "-3Y",
maxDate: "+3Y",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
altFormat: "yy-mm-dd",
defaultDate: "+1w",
"showButtonPanel": true
});
<style>
.pink > a {
background-color: pink !important;
background-image:none !important;
}
.green > a {
background-color: green !important;
background-image: none !important;
}
</style>
Thx in advance
Im not sure if i understand your needs, but if I understand it correct, you want to display the desciption of the selected date/event in another div.
your onSelect
event could be like this:
onSelect: function(dateText, inst) {
var event = events[new Date(dateText)];
$("#description").html(event.text);
}
这篇关于jQuery UI Datepicker事件上的自定义文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!