几个jQuery日期选择器小部件,只向其中一个添加类

several jquery datepicker widgets, add class to only one of them

本文关键字:添加 一个 选择器 日期 jQuery 小部 几个      更新时间:2023-09-26

我对jquery datepicker有问题。

我有一个包含多个日期选择器输入的表单,其中一个输入我需要选择整个星期,而在另一个输入中,我需要以常规方式工作; 问题是,当我将类(ui-weekpicker)添加到小部件中时,用户可以选择整个星期的第一个输入,该类会影响表单中的所有输入,至少是悬停事件,这意味着 onSelect 事件中的其他输入显示正确的日期...如何防止这种情况发生?这是我的周选择日期选择器的代码

$('#jump-picker').datepicker('destroy').val('').attr('placeHolder','Select Week');
    $('#jump-picker').datepicker( {
        yearRange: "-3:+3",
        showOtherMonths: true,
        selectOtherMonths: true,
        language :'es',
        options: {
            dateFormat : 'dd/mm/yy',
            showAnim   : 'slideDown',
        },
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#jump-picker').val($.datepicker.formatDate( dateFormat, startDate, inst.settings )
                 + ' - ' + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
            var year = startDate.getFullYear(),
                month = startDate.getMonth(),
                day = startDate.getDate() - startDate.getDay();
            $('#calendar').fullCalendar ('gotoDate', year, month, day);
            selectCurrentWeek();        
        },
        beforeShow: function() {
            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    }).datepicker('widget').addClass('ui-weekpicker').removeClass ('hide-calendar MonthDatePicker HideTodayButton');
    $('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

感谢您的帮助

不要将调用链接到 $('#jump-picker') 选择器中对 .addClass('ui-weekpicker') 的调用,而是添加第二个调用以仅检索其中一个元素:

$('#jump-picker.week').addClass('ui-weekpicker')

或者,如果您无法将类添加到一个元素而不是另一个元素

$('#jump-picker').first().addClass('ui-weekpicker')

将类添加到匹配的第一个元素。

顺便说一句,当您有多个元素时,使用 id 是一种不好的做法,它们在文档中应该是唯一的。您最好使用jump-picker类。