jQuery Datepicker onSelect事件获取类 [英] jQuery Datepicker onSelect event get class

问题描述

当用户单击日期时，我正在尝试在jQuery datepicker的beforeShowDay函数中设置类.像这样:

I'm trying to get the class set in the beforeShowDay function of a jQuery datepicker when a user clicks on the date. Something like this:

$("#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');
        }
    }
});

每次单击均返回未保留".如何检查被单击元素的类?

Every click returns "not reserved". How can I check the class of the clicked element?

http://jsfiddle.net/sf90zw72/

推荐答案

不幸的是，要困难得多，您得到的el参数是一个包含datePicker实例的对象，而不是从文档中单击的元素

Unfortunately it's a lot harder than that, the el argument you're getting is an object containg the datePicker instance, not the element clicked, from the documentation

...接收选定的日期为文本，datepicker实例为 参数.

...receives the selected date as text and the datepicker instance as parameters.

该对象仅包含所选日期和父Datepicker元素，因此您必须使用这些属性来选择该元素并检查类.

Only the date selected and the parent Datepicker element is included in that object, so you have to use those properties to select the element and check for the class.

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

Note that in your example all dates will have the class reserved as there's no condition, but I'm assuming that's different in the actual code

(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

这篇关于jQuery Datepicker onSelect事件获取类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！