web-dev-qa-db-ger.com

Wert aus JQUERY-Datumsauswahl abrufen

Wenn ich den JQUERY UI-Datepicker inline anzeigen möchte, indem ich ihn einem DIV wie $("div#someID").datepicker() anhänge - wie greife ich auf das ausgewählte Datum zu? Ich gehe davon aus, dass es nicht mit dem Formular übermittelt wird, wenn es nicht an ein INPUT gebunden ist.

Gibt es eine Möglichkeit, die Positionierung des Datepickers relativ zum INPUT-Element zu steuern, wenn ich ihn an ein INPUT-Element binden muss? Wenn ich wollte, dass der Datumsmesser über oder neben dem Element und nicht darunter angezeigt wird, wie würde ich das tun?

Verzeih mir, wenn diese Antwort irgendwo wirklich offensichtlich ist.

29
David Grenier

Wenn Sie das Datum abrufen möchten, an dem der Benutzer es auswählt, können Sie dies tun:

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
    }
});

Ich bin mir nicht sicher über den zweiten Teil Ihrer Frage. Aber haben Sie versucht, Stylesheets und relative Positionierungen zu verwenden?

48
chapa

Sie können die Methode getDate verwenden:

var d = $('div#someID').datepicker('getDate');

Dadurch erhalten Sie ein Date-Objekt in d.

Es gibt keine Positionierungsoptionen das Popup, aber Sie können möglicherweise etwas mit CSS oder dem beforeShow -Ereignis tun, falls erforderlich.

9
mu is too short
$('div#someID').datepicker({
   onSelect: function(dateText, inst) { alert(dateText); }
});

sie müssen es nur an das Eingabeelement binden

6
run

Sie können das name-Attribut dieser Eingabe entfernen, damit es nicht gesendet wird.

So greifen Sie auf den Wert dieses Steuerelements zu:

$("div#someID").datepicker( "getDate" )

und Sie können sich das Dokument unter http://jqueryui.com/demos/datepicker/ ansehen

5
Bright

Sie können dies wie folgt tun - mit Validierung, um sicherzustellen, dass der Datumsauswahlpunkt an das Element gebunden ist.

var dt;

if ($("div#someID").is('.hasDatepicker')) {
    dt = $("div#someID").datepicker('getDate');
}
2
John Gathogo

Wenn Ihre ausgewählten Elemente nicht eins sind, müssen Sie folgendermaßen vorgehen:

$('[type="date"]').datepicker();
$('[type="date"]').change(function() {
    var date = $(this).datepicker("getDate");
    console.log(date);
});
1
evan.z

Um den Datepicker neben dem Eingabefeld zu positionieren, können Sie folgenden Code verwenden.

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginLeft: input.offsetWidth + 'px'});
    }
});
0
TeeDeJee