如何使用javascript代码突出显示JQM-DateBox日历中的日期
如何使用两种不同的颜色突出日历中的单元格,即RED中的一些单元格和使用JavaScript
的其他单元格
一些代码
javascript代码:单击按钮时显示日历,它应该设置日历的日期,但它没有。!!
$('#linkmodelink').live('click', function() { $('#mydate').datebox('open'); }); $(document).ready(function(){ // $('#thisPageID').live('pagecreate', function(event) { // Default picker value of Jan 1, 2012 var defaultPickerValue = [2011, 11, 29]; // Make it a date var presetDate = new Date(defaultPickerValue[0], defaultPickerValue[1], defaultPickerValue[2], 0, 0, 0, 0); // Get Today var todaysDate = new Date(); // Length of 1 Day var lengthOfDay = 24 * 60 * 60 * 1000; // Get the difference var diff = parseInt((((presetDate.getTime() - todaysDate.getTime()) / lengthOfDay)+1)*-1,10); // Set the origin date $('#mydate').data('datebox').options.defaultPickerValue = defaultPickerValue; // Set minDays to disallow anything earlier $('#mydate').data('datebox').options.minDays = diff; //}); });
HTML代码
好的,对于2部分问题,2部分答案:
第1部分:是的,您找到的链接: 具有3状态日颜色的jQuery移动日历非常好用,假设两组日期中的一组永远不可选。 如果您需要2组可选日期,请使用highDates和highDatesAlt选项,您可以在此处查看: http : //jsfiddle.net/Qve5Z/1/
为了使它们成为RED / GREEN,您需要制作自己的主题样本,并将它们包含在您的网站中。 可以在这里轻松制作主题: http : //jquerymobile.com/themeroller/
然后,相应地设置pickPageOHighButtonTheme和pickPageOAHighButtonTheme选项。
第2部分:您的代码示例实际上大部分都是正确的,尽管可能比您真正想要的更多。 对于此示例,我将假设您只想设置日历的“当前选取”日期。 此示例将日期设置为2011-11-13。 http://jsfiddle.net/Qve5Z/2/
Fwiw,我相信你的代码示例可以工作,如果不是被包装:
$(document).ready( function() { } );
它被包裹在:
$('html').live('pageinit', function() { });
请记住,该示例会做得更多一些 – 也就是说,它会限制实际可以选择的天数 – 从您预设的任何日期到当前日期都是如此。 如果您想要这种行为,请告诉我,我也可以编写一个包含该行为的示例。
如本网站所示: http : //jquerymobile.com/demos/1.0rc4/docs/api/events.html有一个名为’vmouseover’的事件,它代表’用于处理触摸或鼠标hover事件的标准化事件’。
这就是你所需要的,可以改变事件的某些东西,实际上是鼠标hover(以前称为hover)。
在Jquery 1.7你可以使用
$("#yourElement").on("vmouseover", function(event){ $(this).css('color', 'green') $(this).css('background-color', 'red') });
将此应用于日历中的不同元素,它应该可以工作。
On(): http : //api.jquery.com/on/
Css(): http : //api.jquery.com/css/
下一次:提供你已经尝试过的一些示例代码!!
ZY