Question

 $(document).ready(function(){
           $('#datepicker').datepicker({
               dateFormat: 'mm/dd/yy', 
               onSelect: function() { 
               $("#getDate").click(function () {
    var start = $("#datepicker").datepicker("getDate"),
    currentDate = new Date(start),
    between = [];
    for(var i=0;i<7;i++) {
        currentDate.setTime(currentDate.getTime() + 24*60*60*1000);
                                        //miliseconds in 1 day
        between.push(new Date(currentDate));

    }
     for (var i = 0; i < between.length; i++) {
        var date = $.datepicker.formatDate('mm/dd/yy', new Date(between[i]));
        between[i] = date;
         $('#datepicker').datepicker({

        beforeShowDay: function(date) {

            var Highlight = between[i];
            if (Highlight) {
                return [true, "Highlighted", Highlight];
            }
            else {
                return [true, '', ''];
            }
        }
    });


    }
        $.getJSON('http://localhost:10039/wps/wcm/myconnect/SampleWork/SampleWork_SA/?srv=cmpnt&source=library&cmpntname=CalendarMenu', function (data) {
    console.log("Length!!!"  +data.length);    
            $.each( data, function( key, val ) {
            console.log("Date!!!!!"  +val.Date);
                if(between[i] = val.Date){
                    console.log("In If Block");
                   // console.log("EventName: " +val.EventName);
                console.log("EventName!!!" +val.EventName);
                $(".current").append("<table cellspacing='5' cellpadding='5'><tr><td>" + val.Time +"  " + "</td><td>"+"  " + val.EventName +"  " + "</td><td>"+"  " + val.EventDescription +"</td><td>" + '<img class="meeting" src="http://localhost:10039' + val.Image + '" alt="" />' +"</td></tr></table>");    
                }
            });
        });

    console.log("Date : "+between);
    //Here I am Getting : Date : 08/05/2014,08/06/2014,08/07/2014,08/08/2014,08/09/2014,08/10/2014,08/11/2014 

})


               }                
           });
       });

css是：

.Highlighted a{

       background-color : Green !important;

       background-image :none !important;

       color: White !important;

       font-weight:bold !important;

       font-size: 12pt;

    }

Answer 1

您可以更改用于选择“ui-state-active”日期的类，然后在那里获得所需的颜色和格式

.ui-state-active {
    background: red !important;
}

JSFiddle Demo

根据评论，这里是更新的答案：

JSFiddle Demo

代码段：

var SelectedDates = {};
SelectedDates[new Date('08/08/2014')] = new Date('08/08/2014');
SelectedDates[new Date('08/09/2014')] = new Date('08/09/2014');
SelectedDates[new Date('08/10/2014')] = new Date('08/10/2014');
$(function() {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var Highlight = SelectedDates[date];
            if (Highlight) {
                return [true, "Highlighted", Highlight];
            }
            else {
                return [true, '', ''];
            }
        }

    });
});

如何使用Jquery在精彩集锦中显示所选日期

1 个答案: