title: HTML: Automatic generated date and time
body: <p>I'm trying to implement a time stamp on a tomcat server page. It should always show the current time and date whenever I trigger a button. </p>
  
  <p>Right now I'm using this: </p>
  
  <pre><code>&lt;iframe src="http://free.timeanddate.com/clock/i4gxfr9k/n237/tlcn/fn2/ftb/tt0/tw0/tm3/ts1/tb4" frameborder="0" width="74" height="36"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>It is a auto-generated time and date view I just found in the web. It is working fine, except the problem that it is always visible and not only when clicking on the button. </p>
  
  <p>HTML-File:</p>
  
  <p>
  </p>
  
  <p>
      Dev. Tool
      
      
  </p>
  
  <p>
      </p>
  
  <pre><code>&lt;h:form enctype="multipart/form-data"&gt;
  
  
      &lt;p:panelGrid styleClass="main-panel" columns="2"&gt;
  
          &lt;f:facet name="header"&gt;
              &lt;h:outputText value="WorkON Dev. Quality Check Tool" style="font-size:16px" /&gt;
              &lt;h:outputLink value="https://inside-wiki.bosch.com/confluence/display/woco/18.0+Dev.+tool+according+to+Dev.+guideline"
                  target="_blank"&gt;
  
                  &lt;h:graphicImage id="helpIcon" value="/imgs/help.png" style="margin-left:10px" /&gt;
                  &lt;p:tooltip for="helpIcon" value="Go to wiki for more information" /&gt;
              &lt;/h:outputLink&gt;
              &lt;p:commandButton value="Validate apl" id="valiNoApl" actionListener="#{fileManager.checkAplExistToExcel()}" ajax="false"
                  style="width: 158px; height: 40px" rendered="false" /&gt;
              &lt;p:commandButton value="Trigger Batch Validation!" id="trigerBatch" actionListener="#{fileManager.writeResultToExcel()}" ajax="false"
                  style="width: 158px; height: 40px; position: relative; left: 300px;" /&gt;
              &lt;p:tooltip for="trigerBatch" value="Validate all projects under '/WOQC' folder to excel report.  It will take some minutes!" /&gt;
  
          &lt;/f:facet&gt;
  
          &lt;p:panel style="width:500px;border:0; padding:0;"&gt;
              &lt;p:panel style="border:0; padding:0;"&gt;              
                  &lt;p:fileUpload fileUploadListener="#{validator.validateAll}" mode="advanced" update="projectDetails,valiResult" sizeLimit="1000000"
                      allowTypes="/(\.|\/)(gif|jpe?g|png|txt|zip)$/" multiple="true" /&gt;
                      &lt;p id="demo"&gt;&lt;/p&gt;
  
                      &lt;script&gt; document.getElementById("demo").innerHTML = Date(); &lt;/script&gt;
              &lt;/p:panel&gt;
  
              &lt;p:panel style="margin-top:30px;border:0"&gt;
  
              &lt;h:outputText value="                           " /&gt;
                  &lt;h:outputText value="Validation result :" style="font-weight: bold" /&gt;
  
              &lt;/p:panel&gt;
  
              &lt;p:dataTable id="valiResult" var="_item" value="#{validator.validationItems}"&gt;
  
                  &lt;p:column headerText="Code" width="10%" style="text-align:center" styleClass="pass-item-green" rendered="#{_item.result.flag == 'Pass'}"&gt;
                      &lt;h:outputText id="valiCodePass" value="#{_item.code}" /&gt;
                      &lt;p:tooltip for="valiCodePass" value="#{_item.content}" showEffect="slide" hideEffect="slide" /&gt;
                  &lt;/p:column&gt;
  
                  &lt;p:column headerText="Result" width="90%" resizable="false" styleClass="pass-item-green" rendered="#{_item.result.flag == 'Pass'}"
                      style="white-space: normal; text-align:center"&gt;
                      &lt;h:outputText value="#{_item.result.flag} : #{_item.result.content}" rendered="#{_item.result.content != null}" /&gt;
                      &lt;h:outputText value="#{_item.result.flag}" rendered="#{_item.result.content == null}" /&gt;
  
                  &lt;/p:column&gt;
  
                  &lt;p:column headerText="Code" width="10%" style="text-align:center" styleClass="fail-item-red" rendered="#{_item.result.flag == 'Fail'}"&gt;
                      &lt;h:outputText id="valiCodeFail" value="#{_item.code}" /&gt;
                      &lt;p:tooltip for="valiCodeFail" value="#{_item.content}" showEffect="slide" hideEffect="slide" /&gt;
                  &lt;/p:column&gt;
  
                  &lt;p:column headerText="Result" width="90%" resizable="false" styleClass="fail-item-red" rendered="#{_item.result.flag == 'Fail'}"
                      style="white-space: normal; text-align:center"&gt;
                      &lt;h:outputText value="#{_item.result.flag} : #{_item.result.content}" /&gt;
                  &lt;/p:column&gt;
  
                  &lt;p:column headerText="Code" width="10%" style="text-align:center" styleClass="warn-item-yellow" rendered="#{_item.result.flag == 'Warn'}"&gt;
                      &lt;h:outputText id="valiCodeWarn" value="#{_item.code}" /&gt;
                      &lt;p:tooltip for="valiCodeWarn" value="#{_item.content}" showEffect="slide" hideEffect="slide" /&gt;
                  &lt;/p:column&gt;
  
                  &lt;p:column headerText="Result" width="90%" resizable="false" styleClass="warn-item-yellow" rendered="#{_item.result.flag == 'Warn'}"
                      style="white-space: normal; text-align:center"&gt;
                      &lt;h:outputText value="#{_item.result.flag} : #{_item.result.content}" /&gt;
                  &lt;/p:column&gt;
  
              &lt;/p:dataTable&gt;
          &lt;/p:panel&gt;
  
  
  
          &lt;p:panel id="projectDetails" style="width:500px;border:0px;padding-top: 5px;"&gt;
              &lt;h:outputText value="Project details :" style="font-weight: bold;" /&gt;
  
              &lt;p:panelGrid columns="2" style="margin-top:20px;border:0" columnClasses="project-info-col-label,project-info-col-value"&gt;    
  
                  &lt;h:outputText value="Project name (in source)" /&gt;
                  &lt;h:outputText value="#{validator.project.name}" /&gt;
  
                  &lt;h:outputText value="Project key" /&gt;
                  &lt;h:outputText value="#{validator.project.key}" /&gt;
  
                  &lt;h:outputText value="Language available" /&gt;
                  &lt;h:outputText value="#{validator.project.lanInfo}" /&gt;
  
                  &lt;h:outputText value="Interface | configed -&gt; used" /&gt;
                  &lt;h:outputText value="#{validator.project.itfInfo}" /&gt;
  
                  &lt;h:outputText value="Interface | web service | used" /&gt;
                  &lt;h:outputText value="#{validator.project.itConfig.wfIterfaces.size()}" /&gt;
  
                  &lt;h:outputText value="Interface | old excel | used" /&gt;
                  &lt;h:outputText value="#{validator.project.itConfig.excelIterfaces.size()}" /&gt;
  
                  &lt;h:outputText value="Interface | database | used" /&gt;
                  &lt;h:outputText value="#{validator.project.itConfig.dbIterfaces.size()}" /&gt;
  
                  &lt;h:outputText value="Workflow | configured | used" /&gt;
                  &lt;h:outputText value="" rendered="#{validator.project.configuredWfs.size() == null}" /&gt;
                  &lt;h:outputText value="#{validator.project.configuredWfs.size()} -&gt; #{validator.project.usedWfs.size()}"
                      rendered="#{validator.project.configuredWfs.size() != null}" /&gt;
  
                  &lt;h:outputText value="Escalation | used" /&gt;
                  &lt;h:outputText value="#{validator.project.escalationConfig.escalationItems.size()}" /&gt;
  
                  &lt;h:outputText value="Unused custom field amount" /&gt;
                  &lt;h:outputText value="#{validator.project.unusedCustomField}" /&gt;
  
                  &lt;h:outputText value="Lines of javascript" /&gt;
                  &lt;h:outputText value="#{validator.project.getJavaLines()}" /&gt;
  
                  &lt;h:outputText value="Lines of velocityscript" /&gt;
                  &lt;h:outputText value="#{validator.project.getVelocityLines()}" /&gt;
  
                  &lt;h:outputText value="Amount of used user picker" /&gt;
                  &lt;h:outputText value="#{validator.project.getUserPicker()}" /&gt;
  
                  &lt;h:outputText value="IssueType | configed -&gt; used" /&gt;
                  &lt;h:outputText value="#{validator.project.getIssueTypeInfo()}" /&gt;
  
                  &lt;h:outputText value="IssueType list" /&gt;
                  &lt;h:outputText value="#{validator.project.getIssueType()}" /&gt;
  
                  &lt;h:outputText value="Used Non-standard status" /&gt;
                  &lt;h:outputText value="#{validator.project.getStatus()}" /&gt;
  
                  &lt;h:outputText value="Used Non-standard resolution" /&gt;
                  &lt;h:outputText value="#{validator.project.getLangPropertiesNames()}" /&gt;
  
                  &lt;h:outputText value="Amount of used parallel approval lines // Amount of used sequential approval lines" /&gt;
                  &lt;h:outputText value="#{validator.project.getParallelApprovalLines()} // #{validator.project.getSequentialApprovalLines()}" 
                  rendered="#{validator.project.getParallelApprovalLines() != null}" /&gt;
              &lt;/p:panelGrid&gt;
          &lt;/p:panel&gt;
  
  
  
          &lt;f:facet name="footer"&gt;
              &lt;center&gt;
                  &lt;h:outputText value="Innovated and developed by CI/AFR-CN  V1.4" style="color:grey" /&gt;
              &lt;/center&gt;
          &lt;/f:facet&gt;
      &lt;/p:panelGrid&gt;
  
  
  &lt;/h:form&gt;
  
  &lt;p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px"&gt;
      &lt;f:facet name="start"&gt;
          &lt;p:graphicImage value="/imgs/loading.gif" /&gt;
      &lt;/f:facet&gt;
  
      &lt;f:facet name="complete"&gt;
          &lt;h:outputText value="" /&gt;
      &lt;/f:facet&gt;
  &lt;/p:ajaxStatus&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>If you know how to show the date/time when clicking a button, please respond.</p>
  
  <p>Thanks in advance! </p>