0

I am using jQuery UI datepicker as a calendar in my web page. I am trying to modify a certain day in the calendar for example a birthday to have different color. How do i do it ?

Dimitar Tonchev
  • 33
  • 2

2 Answers2

0

Hello I did something which might be of help to you on my jsfiddle here: http://jsfiddle.net/samcyn/smp6Lvyp/ . Here whatever date selected with have a blue background and a white color. Check your console to see what's going on.

<code>

    <html>
        <head>
           <style>
     a.ui-state-default.ui-state-active{
            background: blue;
            color: #fff;
          }
           </style>
        </head>
        <body>
           <div id="birthday"></div>
        </body>
    </html>

    <script>

        $('#birthday').datepicker({
            dateFormat: 'yy-m-d',
            onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate'),
            day  = date.getDate(),  
            month = date.getMonth() + 1,              
            year =  date.getFullYear();
            console.log(day + '-' + month + '-' + year);
        }

    });

</code>
Samson Iyanda
  • 512
  • 3
  • 13
0

hi you also check this fiddle https://jsfiddle.net/samcyn/kvcmnd0j/1/

var selectedDays = ["2016-10-21","2016-10-24","2016-10-27","2016-10-28"];
var date = new Date();
(function() { 
    $( "#dateselector").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < selectedDays.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
                    //return [false];
                    return [true, 'ui-state-active', ''];
                }
            }
            return [true];

        }
    });
});
Samson Iyanda
  • 512
  • 3
  • 13