如何使用javascript代码在JQM-DateBox日历中突出显示日期。

Question

如何在日历中突出显示两种不同颜色的单元格，即一些单元格为红色，其他单元格为绿色。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>

Answer 1

好了，对于一个2部分的问题，2部分的答案。

第1部分： 是的，你找到的链接。jQuery手机日历与3状态日颜色 很好用，假设两组日期中的一组是不可选择的。 如果你需要2组可选择的日期，使用highDates和highDatesAlt选项，你可以在这里看到它们。http:/jsfiddle.netQve5Z1

为了使他们REDGREEN，你将需要使你自己的主题色板，并将它们包含在你的网站。 主题可以在这里轻松制作。http:/jquerymobile.comthemeroller。

然后，据此设置pickPageOHighButtonTheme和pickPageOAHighButtonTheme选项。

第二部分 你的代码样本其实大部分都是正确的 尽管可能比你真正想做的要多。 对于这个例子，我将假设你只是想设置日历的 "当前选中 "日期。这个例子将把日期设置为2011-11-13。http:/jsfiddle.netQve5Z2

Fwi, 我相信你的代码样本可以工作，如果不是被包裹在:

$(document).ready( function() {  } );

而是被包裹在..:

$('html').live('pageinit', function() { });

请记住，那个例子做的更多一些 就是说，它限制了实际可以选择的天数 从你预设的任何日期，到当前的任何日期，一目了然。 如果你想要这种行为，请告诉我，我可以制定一个例子，也包括这个。

Answer 2

如这个网站上所示。http:/jquerymobile.comdemos1.0rc4docsapievents.html。 有一个叫做'vmouseover'的事件，它代表了一个'用于处理触摸或鼠标移动事件的标准化事件'。

这就是你所需要的，一个改变事件的可能性，实际上就是鼠标移动（以前称为hover）。

在 Jquery 1.7 中，你可以使用

$("#yourElement").on("vmouseover", function(event){
    $(this).css('color', 'green')
    $(this).css('background-color', 'red')
});

将此应用于你在calender中的不同元素，它应该可以工作。

开启()。http:/api.jquery.comon

Css()。http:/api.jquery.comcss。

下一次：提供一些你已经尝试过的例子代码！！！！！。

zY

Answer 3

为了突出显示日历中的单元格（例如，使一些单元格变成红色，另一些单元格变成绿色），我找到了 calFormatter 回调要比使用 highDates 或 highDatesAlt. 它更好的部分原因是回调适用于所有可见的日期，甚至是当前月份以外的日期。如果你愿意，它还可以覆盖当前或选定日期的高亮显示。

关于如何使用回调的细节可以在这里找到。https:/jtsage.devDateBoxapicalFormatter。