Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - Set datepicker's container to a specific div

I'm using jQuery UI datepicker on an div. the div hides and shows by moving mouse. as the datepicker are exist at the end of the <body> tag, not inside my div, the div disappears when I move the mouse to the datepicker.

I loaded the datepicker like this:

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

How can I set the container of the datepicker to a specific div?

Edit: See it on JSFiddle: http://jsfiddle.net/G4NzC/

like image 222
smartDonkey Avatar asked May 18 '14 12:05

smartDonkey


2 Answers

The solution is to move the dataPicker's div to inside the hidden-absolute-positioned-div.

something like this (this is just the idea by @andrew but you need to improve css styling and other things):

Note that #dt1 is the input text for the date, #ui-datepicker-div is the datepicker's div and #bookingBox is the hidden-absolute-positioned-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();
} });
like image 162
smartDonkey Avatar answered Sep 27 '22 17:09

smartDonkey


Simplest solution which I've found is

$("#myDatePicker").datepicker({
   beforeShow:function(textbox, instance){
     $('.DivToAppendPicker').append($('#ui-datepicker-div'));
   }
});
like image 27
Moiz Avatar answered Sep 27 '22 17:09

Moiz