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: /
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/
Share Improve this question edited May 18, 2014 at 14:22 smartDonkey asked May 18, 2014 at 12:35 smartDonkeysmartDonkey 5501 gold badge5 silver badges14 bronze badges 6- 1 Suggest you create a demo in jsfiddle.net for others to better understand problem. – charlietfl Commented May 18, 2014 at 12:49
- Added. jsfiddle.net/G4NzC – smartDonkey Commented May 18, 2014 at 14:05
- you don't need the onclick event in your code – Susheel Singh Commented May 18, 2014 at 14:13
- thank you I'll change that. but this is not solving the problem anyway – smartDonkey Commented May 18, 2014 at 14:15
- i didn't say that its the solution. just pointed a mistake – Susheel Singh Commented May 18, 2014 at 14:16
2 Answers
Reset to default 10The 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();
} });
Simplest solution which I've found is
$("#myDatePicker").datepicker({
beforeShow:function(textbox, instance){
$('.DivToAppendPicker').append($('#ui-datepicker-div'));
}
});