jQuery Datepicker und Eventhandler

[Tronjer]

Beim Datepicker von jQuery klickt man in ein <input> Element, worauf sich ein Kalender öffnet. Dazu muss das Plugin allerdings beim Laden der Seite initialisiert werden.

$(function() {
    $('#date').datepicker();
});

Mein Problem ist nun, dass sich der Kalender lediglich dann öffnen soll, wenn eine bestimmte Bedingung erfüllt ist (bsw. ein anderes <input> Feld nicht leer ist).

Ich habe ich es auf diese Weise versucht:

$(document).on('click', '#date', function() {
    if ('foo' !== 'bar') {
        $('#date').datepicker();
    }
});

Das ist allerdings keine brauchbare Lösung. Weil man dazu erst in das <input> Feld, anschließend außerhalb und danach wieder in das <input> Feld klicken muss, um den Kalender zu öffnen. Mein nächster Ansatz war ein separates Click-Event, das den Aufruf des Kalenders blockieren soll, wenn eine Bedingung nicht erfüllt ist, aber das funktioniert leider auch nicht:

$(function() {
    $('#date').datepicker();
});

$('#date').click(function(e) {
    if('foo' !== 'bar') {
        e.preventDefault();
        return false;
    }
});

Hätte jemand vielleicht einen Ansatz? Ich grübele schon den ganzen Samstag darüber. :(

 

[Tronjer]

Um die Frage genauer zu spezifizieren: Es geht darum, dass ich den Datepicker an zwei <input> Elemente binden will:

$(function() {
    $('#early_date').datepicker();
    $('#late_date').datepicker();
});

Der Kalender für #late_date soll sich allerdings nur dann öffnen, wenn bei #early_date bereits ein Datum gewählt wurde und dessen Datumsstring dann als minDate übernehmen.

 

[Tronjer]

Ok, ich habe es herausgefunden. Nachfolgend die Lösung, falls jemand mal mit einem ähnlichen Problem konfrontiert sein sollte:

$(function() {
    $('#early_date').datepicker({
        dateFormat : 'dd/mm/yy'
    });
});

$(document).on('blur', '#ui-datepicker-div', function() {
    if ( $('#late_date').hasClass('hasDatepicker') ) {
        $.datepicker._clearDate('#late_date');
        $('#late_date').datepicker('destroy');
        var currentDate = null;
    };
    var currentDate = $("#early_date").datepicker("getDate");
    $('#late_date').datepicker({
        minDate : currentDate,
        dateFormat : 'dd/mm/yy'
    });
});

Erklärung:

- Der Datepicker für das erste <input> Element (#early_date) wird mit der Seite geladen.
- Der Datepicker für das zweite <input> Element (#late_date) wird durch ein blur Event getriggert, nachdem der Kalender des ersten Elements geschlossen wurde. Dabei wird der Datumswert von #early_date in eine Variable geschrieben und #late_date als Startdatum übergeben.
- Die if-Abfrage dient dazu, das Startdatum für #late_date neu zu initialisieren, falls der User nachträglich den Wert des ersten <input> Elements verändert.