jQuery - datepicker Gesetzt die container zu einem bestimmten div

Ich bin mit jQuery UI datepicker auf einer div. der div versteckt und zeigt durch verschieben der Maus. wie der datepicker gibt es am Ende der <body> tag, nicht in meinem div, div verschwindet, wenn ich die Maus bewegen, um den datepicker.

Habe ich geladen datepicker wie diese:

Javascript

$("#dt1").datepicker({
    dateFormat: "dd/mm/yy",
    showOn: "button",
    buttomText: "Arrival date",
    buttonImage: "<button location>",
    buttonImageOnly: true,
});

HTML

<input type="text" id="dt1" size="10" name="dt1" value="Arrival Date" />

Wie kann ich die container von den datepicker zu einem bestimmten div?

Edit: Sehen es auf JSFiddle: http://jsfiddle.net/G4NzC/

  • Schlage vor, Sie erstellen eine demo in jsfiddle.net für die anderen besser zu verstehen-problem.
  • Hinzugefügt. jsfiddle.net/G4NzC
  • Sie brauchen nicht das onclick-Ereignis im code
  • danke ich werde das ändern. aber das ist nicht die Lösung des Problems jedenfalls
  • ich habe nicht gesagt, dass Ihr die Lösung. gerade wies ein Fehler
  • diese ein bisschen arbeiten, aber Sie haben die Maus zu bewegen, schnell und das styling ist versaut, aber hey, die Idee könnte helfen, hier ist der link jsfiddle.net/h59jq
  • danke!!! Ich werde überprüfen Sie diese heraus.

InformationsquelleAutor smartDonkey | 2014-05-18
  1. 9

    Die Lösung ist das verschieben der dataPicker das div innerhalb des hidden-absolut-positioniert div.

    etwas so aus (dies ist nur die Idee von @andrew, aber Sie brauchen, um zu verbessern css-styling und andere Dinge):

    Beachten Sie, dass #dt1 ist die Eingabe von text für das Datum #ui-datepicker-div ist das datepicker-div ' s und #bookingBox ist der hidden-absolut-positioniert div.

    $("#dt1").datepicker({ 
dateFormat: "dd/mm/yy", 
showOn: "button", 
buttomText: "Arrival date",
buttonImage: "http://www.inbar.co.il/designFiles/Inbar_Ico_Calander.png", 
buttonImageOnly: true,
beforeShow:function(textbox, instance){
    $('#ui-datepicker-div').css({
        position: 'absolute',
        top:-20,
        left:5                   
    });
    $('#bookingBox').append($('#ui-datepicker-div'));
    $('#ui-datepicker-div').hide();
} });
    InformationsquelleAutor smartDonkey
  2. 2

    Einfachste Lösung, die ich gefunden habe, ist

    $("#myDatePicker").datepicker({
   beforeShow:function(textbox, instance){
     $('.DivToAppendPicker').append($('#ui-datepicker-div'));
   }
});
    InformationsquelleAutor Moiz
Schreibe einen Kommentar