Question

我有这一系列事件：

var events = {
        "course": [{
            "date": "9-4-2017",
            "hour": "17:30",
            "title": "lorem Ipsum",
            "manager": "yada yada",
            "link": "http://www.example.com"
        },
        {
            "date": "9-5-2017",
            "hour": "17:30",
            "title": "lorem Ipsum",
            "manager": "yada yada",
            "link": "http://www.example.com"
        },
        ]
};

虽然我在点击日期时设法得到了我想要的数据，但我没有放弃如何使用“beforeShowDay”事件将类添加到我的数组中的日期。

这是我的“onSelect”代码，现在可以完美运行：

    dateFormat: 'yyyy-mm-dd',
    onSelect: function (date, el) {
        $('.coursesDatesList ul').empty();
        var day  = el.selectedDay,
            mon  = el.selectedMonth,
            year = el.selectedYear;

        var el = $(el.dpDiv).find('[data-year="'+year+'"][data-month="'+mon+'"]').filter(function() {
            return $(this).find('a').text().trim() == day;
        });
        var eventMonth = mon + 1;
        var eventClass = ' event';
        var eventDate = eventMonth+'-'+el.text()+'-'+year;
        if(el[0].className == eventClass) {
            $.each(events.course, function(i, v) {
                if (v.date.search(eventDate) != -1) {

                    $('.coursesDatesContainer .courseDate').html(eventDate.replace(/-/g, '/'));
                    $('.coursesDatesContainer ul').append(
                        "<li>" +
                            "<span class='courseItemTime'>"+v.hour+"</span>" +
                            "<div class='courseItemName'><a title='"+v.title+"' href='"+v.link+"'>"+v.title+"</a></div>" +
                            "<span class='courseItemLecturer'>"+v.manager+"</span>" +
                            "<a class='goLink' href='"+v.link+"' title='"+v.title+"'>❯</a>" +
                        "</li>");

                    return;
                }
            });
        } else {
            //console.log('not an event day!');
        }
    }

Answer 1

希望这有帮助！

使用inArray从您的数组中获取日期。

var array=[];
$.each(events.course, function(i, v) {
array.push(v.date);
});
$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
        if($.inArray(string, array) == -1){
            return [true];
        }
        else{
        return [true,"newClass"];
        }
    }
});

 var events = {
        "course": [{
            "date": "19-09-2017",
            "hour": "17:30",
            "title": "lorem Ipsum",
            "manager": "yada yada",
            "link": "http://www.example.com"
        },
        {
            "date": "28-09-2017",
            "hour": "17:30",
            "title": "lorem Ipsum",
            "manager": "yada yada",
            "link": "http://www.example.com"
        },
        ]
};
var array=[];
$.each(events.course, function(i, v) {
array.push(v.date);
});
$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
        if($.inArray(string, array) == -1){
        	return [true];
        }
        else{
        return [true,"newClass"];
        }
    }
});

#ui-datepicker-div { font-size: 12px; } 
td.newClass>a {
    background: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<input type="text" id="date1" name="date1"/>

从数组添加类到日期（Jquery UI Datepicker）

1 个答案: