我想在我的应用程序中有jQuery日历,但不是日期选择器。可以将它嵌入到页面中吗?在页面中嵌入jQuery日历,在输入字段外
我想为每个日期添加自定义数据。这可能吗?
1
A
回答
2
我有一个例子,我几个星期前给了一个颜色和悬停的日期。您可以根据需要更改此代码!现场示例:http://marc2.nl/workshops.html(此演示确实给它一个背景颜色,并将链接悬停)。为其添加背景色或添加悬停,您可以向其添加图像。
初始化:
var calDates = {"36":{"datetime":"2013-02-18 11:02:22","name":"name1","color":"e8b1b1","url":"url1"},"37":{"datetime":"2013-01-22 11:03:08","name":"name2","color":"9fd69f","url":"url2"}};
$("#calendar").datepicker({
onChangeMonthYear : updateDates,
onSelect : updateDates
});
updateDates();
遍历的日期,并给它正确的颜色:
function updateDates()
{
// Timeout is needed otherwise jQuery UI has not yet updates the month
setTimeout(function(){
for(var k in calDates)
{
var obj = calDates[k],
yearMonthDay = obj.datetime.split(" ")[0].split("-"),
time = obj.datetime.split(" ")[1];
$("#calendar [data-month='" + (parseInt(yearMonthDay[1]) - 1) + "'][data-year='" + yearMonthDay[0] + "'] a").each(function(){
if($(this).text() == yearMonthDay[2])
{
$(this)
.css({
backgroundColor : "#" + obj.color,
cursor: "pointer",
position : "relative"
})
.unbind("click")
.attr("href", obj.url)
.bind("click", function(){
document.location = $(this).attr("href");
})
.bind("mouseenter", function(){
$(this).find(".hover").show();
})
.bind("mouseleave", function(){
$(this).find(".hover").hide();
})
.append("<div class='hover'><strong>" + obj.name + "</strong><br />" + time + "</div>");
}
});
}
}, 10);
}
+0
谢谢。这似乎正是我想要的:) – Andrew 2013-02-22 18:31:44
0
那么,你真正想要的是一个日历小部件?你可以检查谷歌的“jquery日历”。这是第一个,我发现:
http://arshaw.com/fullcalendar/
这里的选项相当的大名单:
http://www.tripwiremagazine.com/2012/11/jquery-calendar-date-pickers.html
而且五另一个列表:
http://www.devcurry.com/2010/06/5-jquery-calendar-plugins-that-can-be.html
相关问题
- 1. Jquery和DatePicker - 按日期在输入字段中更改日历
- 2. 如何在网页中嵌入Google日历页面
- 3. 在输入字段中嵌入图像
- 4. 在JQuery中的输入字段中输入日期验证
- 5. Jquery遍历输入字段的祖先
- 6. 如何为日历插件添加额外的输入字段?
- 7. sap.m.DatePicker setDateValue仅在日历nopt输入字段中设置
- 8. jQuery的日期选择器 - 填补在页面加载输入字段
- 9. 在页面刷新页面后重新对焦输入字段
- 10. 在rails中嵌入谷歌日历
- 11. 在Google日历中嵌入网站
- 12. 在jQuery中输入字段占位符
- 13. 在JQuery中验证输入字段
- 14. 无法将输入字段集中在HTML页面中
- 15. jQuery:如何在输入过程中验证输入字段?
- 16. 使用jQuery调用一次url在输入字段中输入
- 17. 一个额外的输入字段在
- 18. 如何将单品页面中输入字段中输入的数量的值输入到magento中的cart页面中的输入字段?
- 19. 在jquery中为日期应用输入字段的掩码
- 20. datetime日历:在单个输入字段中选择日期范围
- 21. jQuery仅在输入字段中输入内容时才添加新字段
- 22. 闪存输入字段和嵌入
- 23. 如何在Visualforce页面中为用户显示输入字段?
- 24. 页面刷新时在输入字段中保留值
- 25. 在php页面中回显输入字段值
- 26. 按下在textarea字段中输入刷新页面
- 27. 在页面中输入任意键到搜索字段
- 28. 嵌入SVG在ASP.net页面
- 29. 强制jQuery UI Datepicker在下面的输入字段中显示
- 30. 非角度页面+量角器:sendKeys到日期输入字段
您可以使用DIV和日期选择器添加到它。就像你平时所做的一样,但是你想为第二个问题做什么? – Niels 2013-02-22 18:10:31
@Niels我想在数字条目下添加一张图片。 – Andrew 2013-02-22 18:11:24