突出显示< TR>整个星期的日期选择器 [英] Highlight <TR> entire week datepicker

问题描述

我有一个功能齐全的日期选择器，它可以正常工作，您可以从中选择一个整个工作日(星期一至星期五).我现在想做的是将其进一步扩展，以便在单击特定的一周时单击.它将突出整个.我可以像下面这样临时工作: Calandar preivew .可以看出，我遇到的问题是我的表行似乎在做奇数，偶数，奇数偶数.至于第一周，我突出显示该行以红色突出显示，并且单元格以黄色高亮显示.然后，它可以正常工作的那个星期就可以了，然后，如果我要选择之后的那个星期，将会重复同样的事情.我尝试检查jquery-ui-1.8.4.custom.css和jquery-ui.css，但没有运气.似乎让我感到困惑的是，为什么这些单元格以黄色突出显示?该代码遵循我的日期选择器.

I have a datepicker that is fully functional and is working whereby you can select an entire commencing working week (Mon-Fri). What I am now trying to do is extend it a little further so that when I click on a specific week. It will highlight that entire . I have it paritally working which looks like the following: Calandar preivew. It can be seen that the problem I am having is that the table row to me seems to be doing a odd, even, odd even. As for the first week I highlight the row is highlighted in red and the cells are hihglighted in yellow. Then the week afer that it work fines and then if I was to select the week after that the same would be repeated. I tried checking the jquery-ui-1.8.4.custom.css and the jquery-ui.css, and had no luck. What seems to confuse me is why are the cells being highlighted in yellow? The code follows for my datepicker.

JavaScript:

$(function() 
{
    var startDate;
    var endDate;
    var selectCurrentWeek = function() 
    {
        window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1);
    }
    function check(d) {
        if(d.length() == 2) {
            dd = d;
            return dd;
        } else {
            dd = "0" + myDateParts[0];
            return dd;
        }
    }

    var selectedWeek;//remember which week the user selected here

    $('.week-picker').datepicker( {
        beforeShowDay: $.datepicker.noWeekends,
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = 'yy-mm-dd'
            var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));

            var oldDate = document.getElementById('startDate');
            var date_textnode = oldDate.firstChild;
            var date_text = date_textnode.data;
            myDateParts = date_text.split("-");

            var dd = myDateParts[2];

            var mm = myDateParts[1];

            var yy = myDateParts[0];

            selectCurrentWeek();

            window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;

        },
        beforeShowDay: function(date) {

            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

   $( ".week-picker" ).datepicker().click(function(event) {
    // highlight the TR
    $(".ui-datepicker-current-day").parent().addClass('highlight');

    // highlight the TD > A
    $(".ui-datepicker-calendarr-day").siblings().find('a').addClass('white');
}); 
    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });


});

HTML

<div class="datepicker borderbox">
        <b><center>Hours for Week commencing: <span id="startDate"></span></center></b>
        <div class="week-picker"></div>
    </div>

CSS

.highlight {
    border: 1px solid red;
}

.white {
    background: white !important;
}

我尝试查看以下stackoverflow问题相关的stackoverflow .对此没有运气，因为该链接已断开，并且还尝试在JSfiddle中查看它.除此之外，我设置日期选择器的方式也有所不同.

I have tried looking at the following stackoverflow question Related stackoverflow. Had no luck with this, as the link was broken and also tried viewing the it in JSfiddle. Further to this the way I have set my datepicker is different.

我最初是想让我的日历像> 当我尝试这样做时，我得到以下信息.这与CSS

I am intially trying to get my calendar to work like this But for some reason when I try do this I get the following. Is this something to do with the css

Update2

日历& Firebug输出

推荐答案

这是您想要的吗?

http://jsfiddle.net/william/YQ2Zw/2/

有几处出了问题:

ui-datepicker-current-day类已应用于<td>元素，因此它只需要向上移动一级即可找到<tr>，因此我取消了对parent()的调用:

The ui-datepicker-current-day class was applied to a <td> element, so it only needs to travel one level up to find the <tr>, so I took away one call to parent():

$(".ui-datepicker-current-day").parent().addClass('highlight');

您使用ui-datepicker-current-day类设置了多天.这就是为什么我需要使用:eq(0)选择器仅选择第一个元素的原因:

You set multiple days with the ui-datepicker-current-day class. That was why I needed to use the :eq(0) selector to only select the first element:

$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');

此外，您为上述语句调用了错误的类.

Also, you were calling the wrong class for the statement above.

这篇关于突出显示< TR>整个星期的日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！