jQuery Datepicker, выберите несколько дат и отметьте их с помощью css во время выбора, навсегда - PullRequest
Новая
       10

jQuery Datepicker, выберите несколько дат и отметьте их с помощью css во время выбора, навсегда

0 голосов
/ 15 августа 2011

, поэтому я потратил целый день на разработку и чтение (или наоборот), чтобы позволить моему jQuery datepicker выбирать и выделять разные даты.

Для этого мне удалось записать выбранные даты в массив, который визуализируется в простом текстовом поле.

Что мне не удалось сделать, так это навсегда изменить вид выбранной даты в указателе даты.

Я реализовал опцию beforeShowDay:, которая работает правильно после загрузки средства выбора даты, но, конечно, не вызывается непосредственно при выборе даты. Для этого я догадался, что мне нужно обновить представление «onSelect», но обновление не работает должным образом. Прямо сейчас у меня есть несколько небольших методов для обработки массива даты.

После добавления или удаления даты я пытаюсь обновить средство выбора даты.

После выбора даты я добавляю ее или удаляю из массива дат. Кроме того, при выборе я сопоставляю выбранный день и пытаюсь добавитьClass ().

Но еще раз, я думаю, что я что-то пропустил, так как это не показано в моем указателе даты.

Вот мой код сейчас: 

var dates = new Array();

function addDate(date) {
    if (jQuery.inArray(date, dates) < 0 && date) {
        dates.push(date);
    }
}

function removeDate(index) {
    dates.splice(index, 1);
}

// Adds a date if we don't have it yet, else remove it and update the dates
// textfield
function addOrRemoveDate(date) {
    var index = jQuery.inArray(date, dates);
    if (index >= 0) {
        removeDate(index);
        updateDatesField(dates);
    } else {
        addDate(date);
        updateDatesField(dates);
    }
    jQuery(calContainer).datepicker("refresh");
}


    var calContainer = document.getElementById("calendar-container");

    jQuery(calContainer).datepicker({
        minDate : new Date(),
        dateFormat : "@",
        onSelect : function(dateText, inst) {
            addOrRemoveDate(dateText);

            jQuery(".ui-datepicker-calendar tbody tr td a").each(function() {
                if (jQuery(this).text() == inst.selectedDay) {
                    jQuery(this).addClass("ui-state-highlight");
                    jQuery(this).parent().addClass("selected");
                }
            });
            // addTimeSelectorColumns(dates);
        },
        beforeShowDay : function(_date) {
            var gotDate = -1;
            for ( var index = 0; index < dates.length; index++) {
                if (_date.getTime() == dates[index]) {
                    gotDate = 1;
                } else {
                    gotDate = -1;
                }
            }

            if (gotDate >= 0) {
                return [ true, "ui-datepicker-today", "Event Name" ];
            }
            return [ true, "" ];
        }
    });
function updateDatesField(dates) {

    if (dates.length > 0) {
        var tmpDatesStrArr = new Array();
        var dateString = "";
        var datesField = document.getElementById("dates");

        for ( var index = 0; index < dates.length; index++) {
            var dateNum = dates[index];

            var tmpDate = new Date();
            tmpDate.setTime(dateNum);

            dateString = tmpDate.getDate() + "." + tmpDate.getMonth() + "."
                    + tmpDate.getFullYear();
            tmpDatesStrArr.push(dateString);
        }

        jQuery(datesField).val(tmpDatesStrArr);
    }
}

(Я все еще новичок в Javascript / jQuery, поэтому любая помощь или подсказки в моем кодировании приветствуются, кстати ...)

1 Ответ

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

Это зависит от того, хотите ли вы придерживаться JQuery UI или нет. Если вы открыты для другой библиотеки, существует jQuery Datepicker, который поддерживает множественный выбор: jquery.datePicker с включенным множественным выбором . Это может избавить вас от некоторых неудобств с jQuery UI, поскольку изначально не поддерживает множественный выбор.

EDIT:

Если ваша основная библиотека не является jQuery, я думаю, вам следует искать автономную или зависимую от прототипа библиотеку. Календарь JS выглядит многообещающе. Он изначально поддерживает множественный выбор путем обнаружения клавиши Ctrl.

...