function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
thecoldfusionthecoldfusion 

DatePicker does not show for date fields...

Hello,

I am having issue with DatePicker not popping up automatically. In fact, it does not pop up at all. My input field is definitely a date field. Firebug reports problem like this :-

Error:
this.div is null
https://na3.salesforce.com/dJS/en/1219782666000/library.js
Line 22568

this.div is null
iframeShim(null)library.js (line 22568)
DatePicker()library.js (line 7537)
pickDate()(true, "j_id0:j_id1:j_id134:j_id135:j_id215:j_id216:j_id220:0:j_id224", false, undefined)library.js (line 7795)
onfocus(focus )IPPage—i...FLg%3D%3D (line 2)
[Break on this error] if (this.div.currentStyle) {

 Could anyone help me?

Thanks

Best Answer chosen by Admin (Salesforce Developers) 
thecoldfusionthecoldfusion
I tried this at very top of VF page and it worked! (with a temporary date field named "dummyDateField".)

Code:
    <apex:outputPanel style="display:none;">
        <apex:form>
            <apex:inputField value="{!dummyDateField__c}" />
        </apex:form>
    </apex:outputPanel>

 This should force DatePicker to be rendered initially on the page with its container panel hidden completely.

All Answers

okaylah52okaylah52
Can you post your Visualforce (VF) page? Do you have an extension controller?
thecoldfusionthecoldfusion

I do have a custom controller.
I have posted abridged version of the VF page here -

Code:
<apex:page standardController="IP__c" extensions="IPController" sidebar="true">

    <apex:pageBlock >

        <apex:pageBlockSection title="Related Info" columns="2">

            <apex:outputField value="{!ip.Project__r.PID__c}" />

            <apex:outputField value="{!ip.Project__r.Project_Title__c}" />

        </apex:pageBlockSection>

        <apex:tabPanel switchType="client" selectedTab="tabIP1" id="theTabPanel" headerSpacing="2" contentStyle="height:100px;">

            <apex:tab label="Tab1" name="tabIP1" id="tabIP1">

                <apex:outputPanel styleClass="divOverflowAuto" layout="block">

                    <c:IPPageComponent1 ipVar="{!ipVar1}" />

                </apex:outputPanel>

            </apex:tab>

            .
            . ( 8 more tabs here )
            .

            <apex:tab label="Tab10" name="tabIP10" id="tabIP10">

                <apex:outputPanel styleClass="divOverflowAuto" layout="block">

                    <c:IPPageComponent10 ipVar="{!ipVar10}" />

                </apex:outputPanel>

            </apex:tab>

        </apex:tabPanel>

    </apex:pageBlock>

</apex:page>



and code for each component can be found in
http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=4356#M4356

 Thanks
XactiumBenXactiumBen
Do you get the same issue if you don't use tabPanel?  I've noticed a few issues with using the tabPanel tag.
thecoldfusionthecoldfusion
Yes. Same issue without using tabPanel.

Code: (library.js)
7534 function DatePicker() {
7535     this.today = DateUtil.getDateTimeFromUserLocale(UserContext.today);
7536     this.calendarDiv = document.getElementById(DatePickerIds.DOM_ID);
7537     this.shim = new iframeShim(this.calendarDiv);
7538     this.table = document.getElementById(DatePickerIds.TABLE_ID);

DatePickerIds.DOM_ID is set to "datePicker". However, at line 7536, this.calendarDiv is set to null. It seems like there is no element with "datePicker" id.
jwetzlerjwetzler
Do you have any javascript on your page?  I'm wondering if there's something interfering with the datepicker javascript.  What's the smallest possible reproducible case you can get this down to? 
thecoldfusionthecoldfusion
Update:

It seems like if you render date input field upon loading of the page, date picker would not have any problem showing up.
However, if the date field is asynchronously re-rendered (initially supressed) upon clicking a button, you would get the error.

In my case, I have conditionals that controlled whether a output field or an input field is rendered. After clicking 'Edit' button, its container panel would be asynchronously updated to make the date field editable. Doing so, it produced errors as mentioned above.
After having a static input field without 'rendered' attribute, it would show up as soon as the page gets loaded and with the date picker control.

Any reasons why date picker would not work if inside an asynchronously re-rendered component?
jwetzlerjwetzler
Ah yes, I was searching your page for this rendered issue but did not see it in your first post.

We have a bug that the datepicker does not get rendered if the date field is not rendered initially on the page.  Known issue.
thecoldfusionthecoldfusion
Known issue... hmm..  I almost posted a "smallest possible reproducible case" as you requested.
I was wondering if there is a public list of known issues or bug list for us to look at. It would be a good idea to check before posting issues.
Thanks
Kevin SwiggumKevin Swiggum
I'm running into this issue as well with a date field within a tabpanel (switchType=ajax) Is there any workaround?
thecoldfusionthecoldfusion
I tried this at very top of VF page and it worked! (with a temporary date field named "dummyDateField".)

Code:
    <apex:outputPanel style="display:none;">
        <apex:form>
            <apex:inputField value="{!dummyDateField__c}" />
        </apex:form>
    </apex:outputPanel>

 This should force DatePicker to be rendered initially on the page with its container panel hidden completely.
This was selected as the best answer
Kevin SwiggumKevin Swiggum
That worked!

Thanks much.

--Kevin
SteveEthosSteveEthos

I would also like to add that this was a great solution until SF has it fixed (hopefully in the Spring release).

 

I had a combo of a Tabbed Panel, along with a Data Table of Hidden fields that dynamically became rendered depending on the data type of the Drop Down selected:;

 

Example:

 

Field Drop Down,         Operand,          Value

 

It is a logic builder, and depending on the data type of the Field, it would show a Date picker for Date input in the Value.  Previously, it was not showing the popup.   However, with the workaround, it works fine. 

 

 

Here is what I did:

 

1) added the "hidden" output panel.

<apex:outputPanel style="display:none;">

    <apex:form>

      <apex:inputField value="{!TestContact.Birthdate}" />

    </apex:form>

  </apex:outputPanel>

 

2) Added this to the Controller:

private Contact testContact;

    public Contact getTestContact()

    {

        if (testContact == null) testContact = new Contact();

 

        return testContact;

    }

    public void setTestContact(Contact value)

    {

        testContact = value;

    }

 

I found that it worked best when connected to a default SObject and field that would activate the Input field properly.

 

 

 So, thanks for the help!

Steve 
IndeevarIndeevar

Hello

I am having simialr issue where I render Date fields (placed in a hidden container) upon click of a button.

I have no probs in Firefox but in IE I get the error DatePicker is undefined. After seeing this post I have created a hidden output panel and within that I use a inputField mapped to a dummy Date field. Somehow the issue still exists. Is there something I am missing here?

 

Thanks
JohannesBorrmanJohannesBorrman

tried this too and it sucks unless you don't use standardstylesheets :(

 
md1md1
Helped me today, thanks!
VeniVeni
hi tanku very much..last 2 month i struggle in this datepicker.now its working very fine..thanks............
Arun BalasubramanianArun Balasubramanian

Hi Steve - I'm facing this issue today and did try this approach of placing an hidden date field on the visualforce page but it doesnt seem to work for me. May be I was missing something. I tried placing this field on the VF page that contains the tab as well as the VF Page within the tab neither worked. Please advise if I'm missing something. Thanks for your help.