datepicker beforeShowDay不要在禁用的日历上添加类

时间:2015-01-26 22:05:56

标签: jquery datepicker

我已禁用日期选择器日历,仅用于显示不可用日期和具有不可用日期的数组

$(document).ready(function() {
var dates = ['01/03/2015','03/01/2015'];

$('#my_div').datepicker({
    dateFormat: 'dd/mm/yy',
    numberOfMonths: [2,2],
    showButtonPanel: false,
    changeMonth: false,
    changeYear: false,
    minDate: 0,
    maxDate: '+1Y',
    firstDay: 1,
    closeText: 'Chiudi',
    prevText: '<Prec',
    nextText: 'Succ>',
    currentText: 'Oggi',
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'],
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'],
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'],
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'],
    isRTL: false,
    beforeShowDay: function (date){
        var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
        for (var i=0; i < dates.length; ++i)
            if (year == dates[i][2] && month == dates[i][1] - 1 &&  day == dates[i][0] - 1) 
                return [false, 'ui-state-highlight ui-state-active gior-occ'];
        return [false];
                                }
                    });

                        }); 

但是当我在数组中的日期看到结果时,它不返回我的类gior-occ但未定义

<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined">
    <span class="ui-state-default">
        1
    </span>
</td>

有人知道为什么吗?

1 个答案:

答案 0 :(得分:0)

如果您只想将日期字符串与日期数组字符串进行比较,可以执行以下操作:

$(document).ready(function() {
  var dates = ['01/03/2015', '03/01/2015'];

  $('#my_div').datepicker({
    dateFormat: 'dd/mm/yy',
    numberOfMonths: [2, 2],
    showButtonPanel: false,
    changeMonth: false,
    changeYear: false,
    minDate: 0,
    maxDate: '+1Y',
    firstDay: 1,
    closeText: 'Chiudi',
    prevText: '&#x3c;Prec',
    nextText: 'Succ&#x3e;',
    currentText: 'Oggi',
    monthNames: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
    monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
    dayNames: ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
    dayNamesMin: ['Do', 'Lu', 'Ma', 'Me', 'Gio', 'Ve', 'Sa'],
    isRTL: false,
    beforeShowDay: function(date) {
      if ($.inArray($.datepicker.formatDate('dd/mm/yy', date), dates) != -1) {
        return [false, 'ui-state-highlight ui-state-active gior-occ'];
      } else {
        return [false, ''];
      }
    }

  });

});
.gior-occ {
  background-color: yellow;
}
<link href="https://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<input id="my_div" />

请注意相关日期的黄色背景颜色。