CODEWITHSUNDEEP
jquerydatepicker
AgeDeO
AgeDeO

Reputation: 3157

JQuery Datepicker Custom CSS

I have got the following code:

<script>

    function reservedDates(date)
    {
        var reserved = ["2014-03-03","2014-03-04","2014-03-05","2014-03-06","2014-03-07","2014-03-08","2014-03-17","2014-03-18","2014-03-19","2014-03-20","2014-03-21","2014-03-22",];
        var checkoutDates = ["2014-03-09","2014-03-23",];
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
        return [ reserved.indexOf(string) == -1 ];
    }

        $.datepicker.setDefaults($.datepicker.regional['nl']);

        $(function() {
        $( "#startDate, #endDate" ).datepicker({
            beforeShowDay: reservedDates,
            minDate: 0 });

    });

    </script>

Which works great, but as you can see, I got a second array named checkoutDates I would like to change the CSS of those cells but not disable them. I have no idea how to do this.

I looked at this fiddle: http://jsfiddle.net/ambiguous/pjJGf/ but I don't know how to change this to get it working for me.

Upvotes: 0

Views: 1731

Answers (1)

sreenivas
sreenivas

Reputation: 395

with little css you can work that code

.ui-datepicker td {
    border: 1px solid #CCC;
    padding: 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: solid #FFF;
    border-width: 1px 0 0 1px;
}

Upvotes: 1

Related Questions