如何使用两种不同的颜色突出显示日历中的单元格,即使用JavaScript
javascript代码:单击按钮时显示日历,应该设置日历的日期,但它没有。!!
<script type="text/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;
//});
});
</script>
html代码
<input
name="mydate"
id="mydate"
type="date"
pickPageTheme="c"
data-role="datebox"
data-options='{"mode": "calbox", "highDates": ["2011-11-23"] }'>
</div>
<a href="#" id="linkmodelink" data-role="button">show cal</a>
答案 0 :(得分:1)
好的,对于2部分问题,2部分答案:
第1部分:是的,您找到的链接:jQuery mobile calendar with 3-state day colours非常好用,假设两组日期中的一组永远不会被选中。如果您需要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() { });
请记住,该示例会更多一些 - 也就是说,它会限制实际可以拣选的天数 - 从您预设的任何日期到目前的日期都是如此。如果您想要这种行为,请告诉我,我也可以编写一个包含该行为的示例。
答案 1 :(得分:0)
如本网站所示:http://jquerymobile.com/demos/1.0rc4/docs/api/events.html有一个名为&#39; vmouseover&#39;这是一个用于处理触摸或鼠标悬停事件的标准化事件&#39;。
这就是你所需要的,可以改变事件的某些东西,实际上是鼠标悬停(以前称为悬停)。
在Jquery 1.7中你可以使用
$("#yourElement").on("vmouseover", function(event){
$(this).css('color', 'green')
$(this).css('background-color', 'red')
});
将此选项应用于日历中的不同元素,它应该可以正常工作。
Css():http://api.jquery.com/css/
下次:提供一些你已经尝试过的示例代码!!
ZY
答案 2 :(得分:0)
对于突出显示日历中的单元格(例如,使某些红色变为绿色),我发现calFormatter
回调比使用highDates
或highDatesAlt
更加灵活。更好的部分原因是因为回调适用于所有可见日期,甚至是当月以外的日期。如果需要,它也可以覆盖突出显示当前日期或选定日期。
有关如何使用回调的详细信息,请参见:https://jtsage.dev/DateBox/api/calFormatter/