I want the jquery date picker to appear above, i.e, partly within and outside the iframe, like the one in the image below. By the way, the iframe is just a very small part of the page.

But what I am getting is this.

Can anyone please help with me a workaround and achieve a result similar to the 1st image? The date picker I am using is the one in jquery UI date picker.
It looks like you might have position relative set on your container. This could cause your absolutely positioned datepicker to hide within the container. Please try removing any position rule, or using position static.