Apex Code Development You need to sign in to do that
Don't have an account?
TLF Problem with IDs on page containing two Date inputFields
I have a VF page that contains two apex:inputField components that are bound to sObject Date fields. A code snippet for these components is provided below:
<apex:selectList id="view" value="{!view}" size="1" title="Select View"> <apex:selectOption itemValue="all" itemLabel="All" /> <apex:selectOption itemValue="new" itemLabel="New" /> <apex:selectOption itemValue="awaitingProcessing" itemLabel="Awaiting Order Processing" /> <apex:selectOption itemValue="awaitingSeatAssignment" itemLabel="Awaiting Seat Assignment" /> <apex:selectOption itemValue="complete" itemLabel="Complete" /> <apex:selectOption itemValue="failed" itemLabel="Failed Processing" /> </apex:selectList> <span> Start Date: </span> <apex:inputField id="startDate" value="{!startDate.birthdate}" /> <span> End Date: </span> <apex:inputField id="endDate" value="{!endDate.birthdate}" /> <span> Records Per Page: </span> <apex:selectList id="pageSize" value="{!pageSize}" size="1" title="Page Size"> <apex:selectOption itemValue="10" itemLabel="10" /> <apex:selectOption itemValue="25" itemLabel="25" /> <apex:selectOption itemValue="50" itemLabel="50" /> <apex:selectOption itemValue="75" itemLabel="75" /> <apex:selectOption itemValue="100" itemLabel="100" /> <apex:selectOption itemValue="200" itemLabel="200" /> </apex:selectList>
As you can see, I've given each inputField a unique ID (startDate and endDate). When I load the page, if I tab to the "Start Date" field, the date picker pops up under the start date input field as expected. If I tab to the "End Date" field, the date picker also pops up under the start date input field. Also, if I click on the date hyperlink to the right of the end date field, the date is inserted into the start date field! Looking at the page source, I see the following:
<span> Start Date: </span>
<span class="dateInput dateOnlyInput">
<input id="thePage:theForm:filterBlock:startDate" name="thePage:theForm:filterBlock:startDate" onfocus="DatePicker.pickDate(true, 'thePage:theForm:filterBlock:startDate', false);" size="12" type="text" />
<span class="dateFormat">[ <a href="javascript:DatePicker.insertDate('7/2/2009', 'thePage:theForm:filterBlock:startDate', true);">7/2/2009</a> ]
</span>
</span> <span> End Date: </span>
<span class="dateInput dateOnlyInput">
<input id="thePage:theForm:filterBlock:startDate" name="thePage:theForm:filterBlock:endDate" onfocus="DatePicker.pickDate(true, 'thePage:theForm:filterBlock:startDate', false);" size="12" type="text" />
<span class="dateFormat">[ <a href="javascript:DatePicker.insertDate('7/2/2009', 'thePage:theForm:filterBlock:startDate', true);">7/2/2009</a> ]
</span>
</span>
Notice that the id of the generated input text fields are the same, even though I have explicitly assigned different IDs to each. This is why the date picker always seems to be bound to the start date field. Any idea what's going on here? Seems like a bug, but I was just wondering if anyone has any ideas.
TLF