jQuery Datepicker onSelect 事件获取类

Question

当用户单击日期时，我试图在 jQuery 日期选择器的 beforeShowDay 函数中设置类。像这样的：

$("#calendar").datepicker({
    minDate: today,
    dateFormat: dateformat,
    beforeShowDay: function(date) {         
        // set all the dates to have reserved class for now 
        return [true, 'reserved', 'this date reserved'];
    },
    onSelect: function(date, el){
        if ($(el).hasClass('reserved')){
            // on click, check if reserved class exists. 
            console.log('it is reserved!');
        } else {
            console.log('it is not reserved');
        }
    }
});

每次点击都会返回“未保留”。如何查看被点击元素的类？

http://jsfiddle.net/sf90zw72/

Answer 1

不幸的是，它比这更难，您得到的 el 参数是一个包含 datePicker 实例的对象，而不是文档中单击的元素

...接收选定的日期作为文本和日期选择器实例作为 参数。

只有选定的日期和父 Datepicker 元素包含在该对象中，因此您必须使用这些属性来选择元素并检查类。

请注意，在您的示例中，所有日期都将具有 reserved 类，因为没有条件，但我假设实际代码中的情况不同

(function ($) {
    $(document).ready(function () {
        $("#calendar").datepicker({
            dateFormat: 'yyyy-mm-dd',
            beforeShowDay: function (date) {
                return [true, 'reserved', 'this date reserved'];
            },
            onSelect: function (date, el) {
                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;
                });

                if ( el.hasClass('reserved')){
                    console.log('it is reserved!');
                } else {
                    console.log('it is not reserved');
                }
            }
        });
    });
})(jQuery);

FIDDLE

Answer 2

我觉得可以这么简单：

    $jx('.date-picker').datepicker({
        onSelect: function(dateText, $el) {
            if ($jx(this).hasClass('start-date')) {
                console.log('...');
            }
        }           
    });