如何使用 javascript 代码突出显示 JQM-DateBox 日历中的日期答案

【问题标题】：How to highlight dates in JQM-DateBox calendar using javascript code如何使用 javascript 代码突出显示 JQM-DateBox 日历中的日期
【发布时间】：2011-11-17 06:44:08
【问题描述】：

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

【问题讨论】：

我找到了这个答案 [jQuery mobile calendar with 3-state day colours][1] [1]: stackoverflow.com/questions/6358560/…

标签： javascript jquery calendar jquery-mobile

【解决方案1】：

好的，对于一个两部分的问题，一个两部分的答案：

第 1 部分： 是的，您找到的链接：jQuery mobile calendar with 3-state day colours 工作得非常好，假设永远无法选择两组日期中的一组。如果您需要 2 组可选日期，请使用 highDates 和 highDatesAlt 选项，您可以在此处查看它们：http://jsfiddle.net/Qve5Z/1/

为了使它们变成红色/绿色，您需要制作自己的主题色板，并将它们包含在您的网站中。可以在这里轻松制作主题：http://jquerymobile.com/themeroller/

然后，相应地设置 pickPageOHighButtonTheme 和 pickPageOAHighButtonTheme 选项。

第 2 部分：您的代码示例实际上大部分是正确的，尽管可能比您真正想做的要多。对于此示例，我将假设您只想设置日历的“当前选择”日期。此示例将日期设置为 2011-11-13。 http://jsfiddle.net/Qve5Z/2/

Fwiw，我相信你的代码示例会起作用，如果不是被包裹在：

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

它被包裹在：

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

请记住，从您预设的任何日期到当前日期，该示例的功能更多 - 即，它限制了实际可以选择的天数。如果您想要这种行为，请告诉我，我也可以设计一个包含该行为的示例。

【讨论】：

好的，非常感谢，highDates 和 highDatesAlt 选项是一个很好的示例，但是如何使用 JavaScript 代码设置它们的值呢？我需要他们的价值观是动态的
我想高亮可变日期值，我没有固定的一组日期，所以我想用 JavaScript 来选择这些日子来高亮

【解决方案2】：

如本网站所示：http://jquerymobile.com/demos/1.0rc4/docs/api/events.html 有一个名为“vmouseover”的事件，它代表“用于处理触摸或鼠标悬停事件的标准化事件”。

这就是您所需要的，一种在事件上更改某些内容的可能性，实际上就是鼠标悬停（以前称为悬停）。

在 Jquery 1.7 中你可以使用

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

将此应用于日历中的不同元素，它应该可以工作。

开（）：http://api.jquery.com/on/

css():http://api.jquery.com/css/

下一次：提供一些您已经尝试过的示例代码！

【讨论】：

如何访问日历中的特定日期框？！
我已经发布了我拥有的代码，我不知道它可能对任何事情有帮助！
我找到了这个答案 [jQuery mobile calendar with 3-state day colours][1] [1]: stackoverflow.com/questions/6358560/…

【解决方案3】：

对于突出显示日历中的单元格（例如，使一些红色和其他绿色），我发现calFormatter 回调比使用highDates 或highDatesAlt 灵活得多。它更好的部分原因是因为回调适用于所有可见日期，甚至是当月之外的日期。如果需要，它还可以覆盖当前或选定日期的突出显示。

有关如何使用回调的详细信息可以在这里找到：https://jtsage.dev/DateBox/api/calFormatter/

【讨论】：