Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

jquery - How To Highlight Selected Dates In Date Picker

First is there a way to not highlight the current day. Second is there a way to highlight specific days like the way the current day was highlighted?

Here is the code i have:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>


<script type="text/javascript">
var dates = [new Date(2011, 9 - 1, 19),
             new Date(2011, 9 - 1, 20),
             new Date(2011, 9 - 1, 20),
             new Date(2011, 9 - 1, 21),
             new Date(2011, 10 - 1, 31)];

$(function() {

    $('#datepicker').datepicker({
        numberOfMonths: [1, 1],
        beforeShowDay: highlightDays,
    });


    $('#datepicker').click(function() {
        // put your selected date into the data object
        var data = $('#datepicker').val();

        $.get('getdata.php?date=' + data, function(data) {
            $('#events').html(data).show('slow');
        });
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (dates[i].getTime() == date.getTime()) {
                return [true, 'highlight'];
            }
        }
        return [true, ''];
    }
});
</script>

<style>
#highlight, .highlight {
    background-color: #000000;
}
</style>  

</head>
<body>


<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>

<div id="events" style="float:left;font-size: 10pt;">
<p>Select a date on the calendar to see events.</p>
</div>

<div style="clear:both"></div>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

First is there a way to not highlight the current day.

Yes, you can take away the highlighting by removing .ui-state-highlight and .ui-state-hover classes from the anchor element.

Second is there a way to highlight specific days like the way the current day was highlighted?

Yes, either add the classes for highlighting the current day to those days you want to have highlighted, or override the CSS with .ui-state-highlight's style.

For the first approach, here's an example code snippet:

$('#datepicker').datepicker({
    numberOfMonths: [1, 1],
    beforeShowDay: highlightDays
}).click(function() {
    // question 1
    $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');

    // question 2
    $('.highlight a', $(this).next()).addClass('ui-state-highlight');
});

See the first approach in action: http://jsfiddle.net/william/Aut9b. See the second approach in action: http://jsfiddle.net/william/Aut9b/1/.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...