jQuery-установить контейнер datepicker в определенный div

Я использую jQuery UI datepicker на div. div скрывает и показывает, перемещая мышь. поскольку datepicker существуют в конце <body> тег, не внутри моего div, div исчезает, когда я перемещаю мышь в datepicker.

Я загрузил datepicker следующим образом:

в 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" />

как я могу установить контейнер datepicker на определенный див?

Edit: см. его на JSFiddle:http://jsfiddle.net/G4NzC/

6
datepicker html javascript jquery

2 ответов

решение состоит в том, чтобы переместить div dataPicker в скрытый-абсолютный-расположенный-div.

что-то вроде этого (это просто идея @andrew, но вам нужно улучшить стиль css и другие вещи):

отметим, что #dt1 ввод текста на дата, #ui-datepicker-div является div datepicker и #bookingBox является скрытым-абсолютным-расположенным-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();
} });
9

самое простое решение, которое я нашел, это

$("#myDatePicker").datepicker({
   beforeShow:function(textbox, instance){
     $('.DivToAppendPicker').append($('#ui-datepicker-div'));
   }
});
2