Question

我想强调一些自定义日期：这是我目前所拥有的

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 );
        });
    }

但后来我收到了这个错误

Uncaught TypeError: Cannot read property '0' of undefined

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

问题是我想突出显示这个日期，无论当前日期如何，我都看到了像this one这样的答案，但我认为它们不适用于此，是吗？

Answer 1

这似乎更好：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 );
            });
});

Answer 2

以下是突出显示2014年10月2日的查询语句

<!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>

试试这段代码，它完全适合我。希望这能解决你的问题。

Answer 3

您可以使用beforeShowDay，根据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 );

});

在datepicker中突出显示自定义日期

3 个答案: