How to highlight dates in JQM-DateBox calendar usi

问题:

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

some code

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 code

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

Ok, for a 2 part question, a 2 part answer:

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/

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/

Then, set the pickPageOHighButtonTheme and pickPageOAHighButtonTheme options accordingly.

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, I do believe your code sample would work, if instead of being wrapped in:

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

it was wrapped in:

$('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.

回答2:

As shown on this site: http://jquerymobile.com/demos/1.0rc4/docs/api/events.html there is an event called 'vmouseover' which stands a 'Normalized event for handling touch or mouseover events'.

That is what you need, a possibility to change something on an event, which is in fact the mouseover (formerly known as hover).

in Jquery 1.7 you could use

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

Apply this for your different elements in the calender and it should work.

On(): http://api.jquery.com/on/

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

and next time: provide some example code of what you already tried!!

zY