Выделите <TR>всю неделю. - PullRequest
Новая
       14

Выделите <TR>всю неделю.

3 голосов
/ 25 августа 2011

У меня есть полностью работающий палитр, с помощью которого вы можете выбрать целую рабочую неделю (пн-пт).То, что я сейчас пытаюсь сделать, это расширить его немного дальше, чтобы, когда я нажимаю на определенную неделю.Это выделит все это.У меня он работает в приличном режиме, который выглядит следующим образом: Calandar preivew .Видно, что проблема, с которой я сталкиваюсь, заключается в том, что строка таблицы мне кажется нечетной, четной, нечетной четной.Что касается первой недели, я выделяю строку, выделенную красным, а ячейки подсвечиваются желтым.Затем неделя, после того, как она работает, штрафует, а затем, если я выберу неделю, то то же самое будет повторяться.Я попытался проверить jquery-ui-1.8.4.custom.css и jquery-ui.css, но безуспешно.Что меня смущает, так это почему клетки подсвечиваются желтым цветом?Код следует для моего 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 Related stackoverflow .Не повезло с этим, так как ссылка была разорвана, а также попытался просмотреть ее в JSfiddle.В дополнение к этому способ, которым я установил свой указатель даты, отличается.

Я изначально пытаюсь заставить свой календарь работать как this Но по какой-то причине, когда я пытаюсь сделать это, я получаю следующее.Это что-то делать с css

Update2

Календарь и Firebug вывод

1 Ответ

1 голос
/ 26 августа 2011

Это то, что вы хотите?

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

Была пара вещей, которые пошли не так:

Класс ui-datepicker-current-day был применен к элементу <td>, поэтому ему нужно только подняться на один уровень вверх, чтобы найти <tr>, поэтому я забрал один вызов parent(): 

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

Вы устанавливаете несколько дней с помощью класса ui-datepicker-current-day. Вот почему мне нужно было использовать селектор :eq(0), чтобы выбрать только первый элемент: 

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

Кроме того, вы вызывали неправильный класс для приведенного выше утверждения.

...