Description
I have a date input part on a facelets driven page like this:'
<t:inputCalendar value="${onesession.sessionDate}"
id="session_date_input" forceId="true"
size="12"
popupButtonString="#
"
renderAsPopup="true" required="true" addResources="true"
popupDateFormat="${event.dateFormat}"
validator="#
">
<f:convertDateTime locale="${facesContext.externalContext.request.locale}"
timeZone="#
"
dateStyle="short"
type="date"
/>
<t:message for="session_date_input"/>
</t:inputCalendar>
When the button for activating popup is clicked on, nothing happens. I used FireBug to have a look and it appear that the wrong HTML element id for "input" field is passed to the Javascript function that gets called on a mouse click. This is what Firebug reveals:
<span id="session_date_input[0]">
<input id="session_date_input_input[0]" type="text" value="20/03/12" size="12" name="session_date_input[0]">
<span id="session_date_input[0]Span">
<script type="text/javascript">
<input type="button" value="Click here to edit date" onclick="session_5Fdate_5Finput_5B0_5DCalendarVar._popUpCalendar(this,document.getElementById('session_date_input[0]_input'),'d/MM/yy')">
</span>
As you can see, the second parameter to _popUpCalendar functions looks up an element that seems to have an extra "_input" at the end. It doesn't get located by getElementById and the function receives the second parameter as null, which that causes initialization error that I saw in Javascript console in Firebug.
FIX: I think if this extra "_input" in the HTML element id is removed from the lookup, it should work.