id for <p:calandar> input inside a datatable

id for <p:calandar> input inside a datatable

I need to get the correct id of the input inside a datatable for masking. I have used inspect element to check the id. It shows "datatable_attributes:3:att_date_input". But the id seems not the correct one. 

If the calendar is outside of datatable, it works fine. Currently my calendar is inside a datatable.

xhtml
  1. <script src="../../scripting.js"></script>
  2.         <script type="text/javascript">
  3.         jQuery(function($){
  4.             $("#datatable_attributes:3:att_date_input").mask("99/99/9999");
  5.         });
  6. </script>

  8. <h:dataTable styleClass="attributeDatatable" id="datatable_attributes"
  9.                         value="#{pc_Cr1002.w_currency.att_list}" var="varatt_list">
  10.                         <p:column id="att_col1">
  11.                             <h:outputText styleClass="outputText" id="att_caption"
  12.                                 value="#{varatt_list.att_captions}"
  13.                                 style="background-color: #b1d8d8"></h:outputText>
  14.                             <f:attribute value="top" name="valign" />
  15.                         </p:column>
  16.                         <p:column id="att_col2">
  17.                             <p:calendar id="att_date" value="#{varatt_list.att_date}"
  18.                                 rendered="#{varatt_list.att_datatype eq 11561007}"
  19.                                 maxlength="10" pattern="dd/MM/yyyy" 
  20.                                 styleClass="calendar">
  21.                                 <p:watermark for="att_date" value="dd/mm/yyyy"></p:watermark>
  22.                                 <f:convertDateTime type="date" pattern="dd/MM/yyyy" />
  23.                             </p:calendar>
  24.                         </p:column>
  25.                     </h:dataTable>
Inspect element
  1. <td><script id="datatable_attributes:3:j_id1172022159_45dba079_s" type="text/javascript">
  2.   <!--
  3.     $(function(){PrimeFaces.cw('Watermark','widget_datatable_attributes_3_j_id1172022159_45dba079',{id:'datatable_attributes:3:j_id1172022159_45dba079',value:'dd/mm/yyyy',target:'datatable_attributes:3:att_date'},'watermark');});
  4.     //-->
  5.     </script><span id="datatable_attributes:3:att_date" class="calendar"><input id="datatable_attributes:3:att_date_input" class="ui-inputfield ui-widget ui-state-default ui-corner-all" type="text" maxlength="10" name="datatable_attributes:3:att_date_input"></input></span><script id="datatable_attributes:3:att_date_s" type="text/javascript">
  6.   <!--
  7.     $(function(){PrimeFaces.cw('Calendar','widget_datatable_attributes_3_att_date',{id:'datatable_attributes:3:att_date',popup:true,locale:'en',dateFormat:'dd/mm/yy'});});
  8.     //-->
  9. </script></td>