Datepicker widget location issue

Question

I have a visualforce page with a standard controller of a custom object, and within the page and inputfield that is tied to a custom date field of said object. I've dropped the VF page into the page layout for the custom object, and when the inputfield is focused, the date picker widget renders above the field, and is cut-off by the top of the VF page container:

Now the strange thing is if I view the VF page by navigating directly to it via URL (ala na1.salesforce.com/apex/vfpagename?id=a0Th0000023KsdM) and focus the field there, the widget renders below as it typically does for date fields:

Can anyone explain the discrepancy in behavior? I don't think it's an issue with the custom object and/or its page layout, because when I focus other date fields on the object's page layout, the widget renders below, as expected. I also have similar VF pages for other standard/custom objects, and have not had this issue on any inputfields associated with date fields. This is example of one of said pages as an in-line VF section on a page layout:

Edit for additional screen caps: When I inspect the HTML element of the widget where I'm having the issue, you can see the relative vertical position is negative:

But when I inspect it on a page where it renders correctly, the vertical position is positive:

I assume the JavaScript function for the Datepicker widget is determining the positioning of the element, so why the positive/negative difference when the two fields are used in the same manner?

Answer 1

When you click on the date field, an onfocus event is fired that calls the Datepicker javascript function. This does a variety of things, but the relevant part to your question is that it uses the window object to determine the Date Picker's position.

An inline visualforce page on the page layout is displayed in an iframe. The iframe has its own window object, so it is using that to determine the position. When you examine the Visualforce page on it's own, it is using the regular height and width to determine the window size, and not the iframe's.

What I would suggest to do is play with the height setting on the inline visualforce page to ensure there is no cutoff. 200 pixels seems to be the minimum to me.

Answer 2

Hi are u try this code in date time picker css. I m sure to this code because i have faced this problems.

#datePicker{
   position: absolute;
   z-index: 10000!important;;
 }

Answer 3

As you know, the position of date picker is being handled by Salesforce we can only control using override our CSS.

Solution:-

use below Style in your Visualforce page:-

.datePicker{
    display:none;
    padding:0px 0px 0px 0px;

}

Answer 4

I have this problem (in my case was datepicker in Modal). The problem was that the #datePicker is created outside the modal/container.

I solved it using jQuery appendTo function to relocate the datepicker right next to the input tag.

Here is the working solution:

Visualforce:

<div>
     <apex:inputField onclick="onFocusCalendar($(this));" value="{!obj.SchedStartTime}" />
</div> 

jQuery function:

function onFocusCalendar(selector){
    $("#datePicker").appendTo($(selector).parent());
}

P.S. It is working with multiple datepickers.