如何使用JavaScript代码在JQM-DateBox日历中突出显示日期 [英] How to highlight dates in JQM-DateBox calendar using javascript code

问题描述

如何使用两种不同的颜色突出显示日历中的单元格，例如RED中的一些单元格和GREEN中的其他单元格。使用 JavaScript

how to highlight cells in calendar with two different colors, i.e. some cells in RED and the others in GREEN .. using JavaScript

javascript代码：单击按钮时显示日历，它应该为日历设置日期，但它没有。

javascript code : that show a calendar when clicking a button, and it is supposed to set date for the calendar but it didn't .!!

<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>

推荐答案

回答：

第1部分：是，找到的链接： jQuery移动日历与3态日颜色工作非常好，假设两组日期之一永远不可选择。如果您需要2组可选日期，请使用highDates和highDatesAlt选项，您可以在这里查看： http：// jsfiddle.net/Qve5Z/1/

Part 1: yes, the link you found: jQuery mobile calendar with 3-state day colours works very nice, assuming one of the two sets of dates will never be selectable. If you need 2 sets of selectable dates, use the highDates and highDatesAlt options, you can see them here: http://jsfiddle.net/Qve5Z/1/

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

In order to make them RED/GREEN, you will need to make your own theme swatches, and include them in your site. Themes can be easily produced here: http://jquerymobile.com/themeroller/

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

Then, set the pickPageOHighButtonTheme and pickPageOAHighButtonTheme options accordingly.

第2部分： ，虽然也许比你真正想做的更多。对于这个例子，我假设你只想设置日历的当前挑选日期。此示例将设置日期为2011-11-13。 http://jsfiddle.net/Qve5Z/2/

Part 2: Your code sample is actually mostly correct, although maybe more than you really want to do. For this example, I am going to assume you simply want to set the "current picked" date of the calendar. This example will set the date to 2011-11-13. http://jsfiddle.net/Qve5Z/2/

Fwiw，我相信你的代码示例将工作，如果而不是包装：

Fwiw, I do believe your code sample would work, if instead of being wrapped in:

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

包装在：

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

请记住，该样本有更多 - 即，可以挑选 - 一目了然，从任何预设的日期，到当前日期。如果你想要这种行为，让我知道，我可以做一个例子，也包括这一点。

Keep in mind that that sample does a bit more - namely, it limits the amount of days that actually can be picked - at a glance, from whatever date you preset, to whatever the current date is. If you want that behavior, let me know, I can work up an example that includes that too.

这篇关于如何使用JavaScript代码在JQM-DateBox日历中突出显示日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！