CODEWITHSUNDEEP
jquerydatepicker
AlexC
AlexC

Reputation: 9661

datepicker, jquery

I have a datepicker (jquery)

$("#datepicker").datepicker({

});

I want to colorize(highlight) some days in this datepicker. And these days i'd like to get from some array !!!!

I dont know, something like this:

$("#datepicker").datepicker({
highlight:['09/16/2009', 09/12/2009, 08/16/2009 ....] });

Help me please

Thanks a lot !!!

Upvotes: 1

Views: 704

Answers (2)

G.Ashok Kumar
G.Ashok Kumar

Reputation: 1633

Here is the simple one, may be useful for someone

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>

<form>
    <input id="datepicker" />
</form>

Upvotes: 0

redsquare
redsquare

Reputation: 78687

Try using the beforeShowDay function of the datepicker. This fires before rendering each day in the picker. Inside the funcion you check if the current date is in an array of special dates. If it is then you can return an array where the second element is the name of the css class you want rendered on each td.

Demo here

  var someSpecialdates = [1, 5, 12, 21, 27, 30]; 

    $("#datepicker").datepicker({ 
      beforeShowDay: function(dt) { 
        var d = dt.getDate(); 
        return ( $.inArray(d, someSpecialdates ) === -1 ) ? [true,""] :
                                                            [true, "specialDateCSSClass"]; 
      }
    });

Upvotes: 3

Related Questions