Aktivieren/deaktivieren ausgewählten Datumsbereich auf jQuery-UI-datepicker

Also ich habe Folgendes demo -http://dev.driz.co.uk/week.html, die zeigt, dass ein jQuery-UI-datepicker, dass mehrere Instanzen für jeden Monat des Jahres.

Habe ich es geändert, so dass der Benutzer auswählt, ganze Wochen und dann start-und Enddatum für diejenigen Wochen gespeichert sind auf der rechten Seitenleiste mit einer Anzahl Woche.

Was ich will zu tun ist, deaktivieren Sie die Daten, sobald der Benutzer ausgewählt hat, so dass Sie sehen können auf die Kalender-picker, welche Daten ausgewählt wurden (und auch verhindern, dass Sie hinzufügen den gleichen Zeitraum mehr als einmal).

Allerdings weiß ich nicht, wo Sie anfangen mit diesem... ich habe einige aktivieren und deaktivieren von date-Funktionen, aber nicht wissen, wie man tatsächlich deaktivieren Sie die Daten verwenden, die beforeShowDay Methode.

Beispiel:

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('.week-picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

Aber wie kann ich deaktivieren Sie einen Bereich von Daten? Als ich nur noch die start-und Enddaten. Und kann ich rufen Sie die beforeShowDay NACH der datepicker ist auf der Seite wie in meinem Beispiel? UND wie kann ich dann aktivieren Sie die Termine?

Hier der code:

$(function() {

    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
        }, 1);
    }

    $('.week-picker').datepicker( {
        defaultDate: '01/01/2014',
        minDate: '01/01/2013',
        maxDate: '01/01/2015',
        changeMonth: false,
        changeYear: true,
        showWeek: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        numberOfMonths: 12,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            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();
        }
    });

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

    $('.remove').live('click', function(e){

        enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));

        $(this).parent('div').remove();
    });

});

//adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){

    $('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');

}

//disable the dates on the calendar
function disableDates(startDate, endDate){


}

//enable the dates on the calendar
function enableDates(startDate, endDate){


}

Kurz, es sind zwei verschiedene Fragen... Wie kann ich das deaktivieren Termine NACH der datepicker auf der Seite Hinzugefügt wird. Und zweitens wie kann ich deaktivieren Sie einen Bereich zwischen zwei Terminen, so wie es aussieht ist die beforeShowDay Methode erwartet ein array von Daten anstatt einer Reihe.

  • wollen Sie vermeiden Sie Duplikate?
  • Ja, aber das sollte behandelt werden, indem Sie die Termine, wenn Sie ausgewählt werden eh gleich?
InformationsquelleAutor Cameron | 2014-06-30
Schreibe einen Kommentar