jQuery - Set datepicker's container to a specific div
Solution 1
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();
} });
Solution 2
Simplest solution which I've found is
$("#myDatePicker").datepicker({
beforeShow:function(textbox, instance){
$('.DivToAppendPicker').append($('#ui-datepicker-div'));
}
});
smartDonkey
Saluton! My name is Alexander Margolis, I am 13 years old. I started programming about 4 years ago, by getting interested in DOS and Linux Operation Systems. I wanted to learn more and more, so I started in learning PHP from site in my native language. I started programming in Objective-C because my dad's friend bought an iPhone (It was 3 years ago, when iPhone 4 was the newest phone by Apple and wasn't papular in my country) So, I buyed an iPhone too, and fell in love with Apple. An year after that, I bought a Mac, an book about programming in Objective-C and started programming. I read over ten books about programming, nine about Objective-C and Cocoa-Touch and one about android (Java) programming.
Updated on July 17, 2022Comments
-
smartDonkey almost 2 years
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/