calendar in datable JSF 2.0

I have data table which has a list of records, my requirement is to include a calendar for one of the colum开发者_如何学JAVAn in it.I have written a Javascript for a calendar, which on click on calendar image fetches the date and is placed in the corresponding input field.Now the problem i'm facing is the calendar which I've placed in displayed only for the first row of the datatable.my calendar is fetched based on the "id" attribute, how can i get the ID for each row. below is the code which I tried

<h:dataTable id="d" value="#{Class.bean.itemList}" var="iBean" >                        
 <h:column>
  <div class="demo">
   <f:facet name="header">
    <h:outputText style=""value="Date" />
   </f:facet>
   <h:inputText id="dDate" value="#{iBean.date}" />
    <input style="display:none" type="text" id="datepicker" onchange="fetchDate(this);hiddenButtonClick(this)" >
     <h:commandButton style="display:none" id="hiddenitemDateCalc"  value="get date" action="#{Class.itemDateFromUI}" >
     </h:commandButton>
  </div>
 </h:column>
</h:dataTable>

Your example ends up in invalid HTML. All input fields get the same ID. You need to use <h:inputText> instead of <input>, this way JSF will generate an unique ID for each row.

Or, easier, grab a component library which ships with a reuseable calendar component (and more).

• Tomahawk with <t:inputCalendar>
• RichFaces with <rich:calendar>
• PrimeFaces with <p:calendar>

Unrelated to the concrete problem, that <f:facet> should actually be declared outside the <div>.