Highlight custom dates in datepicker

Question

I would like to highlight some custom dates: this is what I have so far

if ( jQuery('.datepicker').length ) {
        jQuery('.datepicker').each(function (i) {
            var $item = jQuery(this);
            var fechas = $item.data('fechas');              
            var options = {
                'display' : $item.data('display') == '' ? '' : $item.data('display'),
                beforeShowDay: function(date) {
                    console.log(date);
                    if ( fechas.length ) {
                        for( var i = 0; i < fechas.length; i++ ) {
                            if ( fechas[i] == date) {
                                return [true, 'css-class-to-highlight', 'tooltipText'];
                            }
                        }
                    }
                }
            }
            $item.datepicker( options );
        });
    }

But then I got this error

Uncaught TypeError: Cannot read property '0' of undefined

http://jsfiddle.net/34jLb8o3/2/

the thing is I want to highlight this dates, no matter the current date, I've seen answers like this one but I don't think they apply here, Does it?

DarkMukke · Accepted Answer · 2014-10-13T08:05:00.590

0

this seem to work better : http://jsfiddle.net/34jLb8o3/8/

jQuery(function(){
    jQuery('.datepicker').each(function (i) {
                var $item = jQuery(this);
                var fechas = $item.data('fechas');              
                var options = {
                    'dateFormat' : 'dd/mm/yy',
                    'display' : $item.data('display') == '' ? '' : $item.data('display'),
                    beforeShowDay: function(date) {
                        if ( fechas.length ) {
                            var datestr = [ date.getDate(), date.getMonth()+1, date.getFullYear()];
                            datestr = datestr.join('/');
                            console.log(datestr);
                            if ($.inArray(datestr, fechas) != -1) {                                    
                                return [true, 'css-class-to-highlight', 'tooltipText'];
                            } else {
                                return [false, 'css-normal-class', 'no-highlight'];
                            }
                        }
                    }
                }
                $item.datepicker( options );
            });
});

edited Oct 13 '14 at 08:05

answered Oct 10 '14 at 09:17

DarkMukke

2,469
1
23
31

Hi, Thanks for your answer, I adapted my code to the one in your ansewr, but I am given an error, any thoughts? – Toni Michel Caubet Oct 10 '14 at 09:41
Actually, it is visible; I can log each `fechas[i]` – Toni Michel Caubet Oct 10 '14 at 09:45
changed answere based on example code, i think your fechas didnt come back as an actual array – DarkMukke Oct 10 '14 at 10:09
Getting close, but this adds the class to everyday... http://jsfiddle.net/34jLb8o3/7/ – Toni Michel Caubet Oct 10 '14 at 10:14
yerr, i forgot that inArray doesnt do a boolean but actually returns -1 if not found, so adjust my example for that, besides the undefined index error came from the fact that the function always expects a return, – DarkMukke Oct 13 '14 at 08:06
@ToniMichelCaubet does this work for you as an example ? – DarkMukke Oct 13 '14 at 09:27

Abhishek · Answer 2 · 2014-10-10T10:31:00.510

Here is the query statement to highlight date 2 nd of oct 2014

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <style>
        .ui-state-highlight {
        background: red !important;    
    }

    </style>
    <script type="text/javascript">
        $(function () {
            $("#date").datepicker();
            $("#date").bind('click', function () { highLightDate(2014, 9, 31); });

        })

        function highLightDate (_year,_month,_day){
            $('[data-year=' + _year + '][data-month=' + _month + '] > a:contains(' + _day + ')')
                .filter(function (index) {                   
                    return $(this).text() == _day;
                })
                .addClass('ui-state-highlight');
        }
    </script>

</head>
<body>
    <input type="text" width="100"  id="date" />
</body>
</html>

Try this code, its completely working at my end. Hope this solves your problem.

Let me have a look ;) – Toni Michel Caubet Oct 10 '14 at 10:03 — Toni Michel Caubet, Oct 10 '14 at 10:03

score 0 · Answer 3 · answered Oct 10 '14 at 10:20

You can use beforeShowDay, returning an array as per the docs

http://jsbin.com/borum/2/edit?js,output

$(function() {
  var dates = ["10/10/2014","12/10/2014","13/10/2014"];              
    var options = {
      dateFormat : 'dd/mm/yy',
      beforeShowDay: function(date) {
       formattedDate = $.datepicker.formatDate('dd/mm/yy', date);   
       if(dates.indexOf(formattedDate) === -1){
          return [false];
       }
       else{
          return [true];
       }
      }
    };
  $( "#datepicker" ).datepicker( options );

});

Highlight custom dates in datepicker

3 Answers3