title: Display a chronometer, setInterval, in a primefaces datatable
body: <p>I just started on a Primefaces program. I want to display chronometer in a <code>Datatable</code>. I want to use <code>setInterval</code> for displaying a "real time chronometer". I got a Date object in the attribute <code>synopticBean.enteredTime</code> which I use for start counting.</p>
  
  <p>But I don't know how to call a JavaScript function for displaying the chronometer. </p>
  
  <pre><code>&lt;p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}"&gt;
      &lt;p:column headerText="Family"&gt;
          &lt;h:outputText value="#{synopticBean.family}" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="id"&gt;
          &lt;h:outputText value="#{synopticBean.brNumber}" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="Target Time"&gt;
          &lt;h:outputText value="#{synopticBean.referenceTime}" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="Δ"&gt;
          &lt;h:outputText value="setInterval(function(){ alert("Hello"); }, 3000);" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="Elapsed Time"&gt;
          &lt;h:outputText value="#{synopticBean.enteredTime}" /&gt;
      &lt;/p:column&gt;
  &lt;/p:dataTable&gt;
  </code></pre>
  
  <p>The result I want it's a datatable where the two last columns display realtime chronometer that decrease and increase :</p>
  
  <p><a href="https://i.stack.imgur.com/unuds.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/unuds.png" alt="enter image description here"></a></p>
  
  <p>My datas are available with a java bean. The "Elapsed Time" column get a java Date like "Mon Jan 21 15:26:40 CET 2019". I don't know how to display a real time chronometer in each cell for the column. How can I set my java date to a <code>setInterval</code> method and display the "result" in a cell that I don't know the html's id?</p>