Answers.Body: <p>You need to initialize datepicker field</p>
  <pre><code>$('input[name=&quot;job_date_time_end&quot;]').datepicker();
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-09-03T09:42:26.857Z
Answers.LastActivityDate: 2021-09-03T09:42:26.857Z
Answers.UserDisplayName: Pradeep Nayak
Body: <p>We have one custom extension which try to add additional field on scheduled job New/Edit screen using hook.</p>
  <pre><code>    function jobextra_civicrm_buildForm($formName, &amp;$form) {
        if ($formName == 'CRM_Admin_Form_Job') {
          $form-&gt;add('datepicker', 'job_date_time_start', ts('Date &amp; Time Start'), NULL, FALSE, ['minDate' =&gt; date('Y-m-d')]);
          $form-&gt;add('datepicker', 'job_date_time_end', ts('Date &amp; Time End'), NULL, FALSE, ['minDate' =&gt; date('Y-m-d')]);
          // there are other non date related field
        }
      }
  </code></pre>
  <p>and supporting extra.tpl file <code>templates/CRM/Admin/Page/Job.extra.tpl</code></p>
  <pre><code>{literal}
  &lt;script type=&quot;text/javascript&quot;&gt;
      CRM.$(document).ready(function() {
          CRM.$('.crm-job-form-block-name_job_date_time_end').insertAfter('.crm-job-form-block-run_frequency');
          CRM.$('.crm-job-form-block-name_job_date_time_start').insertAfter('.crm-job-form-block-run_frequency');
           // other fields are inserted...
      });
  
  &lt;/script&gt;
  {/literal}
  &lt;table style=&quot;display:none;&quot;&gt;
      &lt;tr class=&quot;crm-job-form-block-name_job_date_time_start&quot; style=&quot;&quot;&gt;
          &lt;td class=&quot;label&quot;&gt;{$form.job_date_time_start.label}&lt;/td&gt;
          &lt;td&gt;{$form.job_date_time_start.html}
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;crm-job-form-block-name_job_date_time_end&quot; style=&quot;&quot;&gt;
          &lt;td class=&quot;label&quot;&gt;{$form.job_date_time_end.label}&lt;/td&gt;
          &lt;td&gt;{$form.job_date_time_end.html}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Date field is not rendering correctly, instead of showing date picker field and time field, i am just seeing simple textfield.</p>
  <p>If i put these 2 field into core <code>templates/CRM/Admin/Form/Job.tpl</code>, both field rendered correctly.</p>
  <p>Since this is in <code>extra.tpl</code> , tpl file load outside <code>crm-container</code>, and then we moving these field using jQuery into right position inside <code>crm-container</code>.</p>
  <p>that may be issue?.</p>
  
Tags: <extension><scheduled-job>
Title: Date field not rendering correctly through extra.tpl file
ThreadText: # Date field not rendering correctly through extra.tpl file
  
  (Asked by: username_0 on 2021-09-03)
  
  We have one custom extension which try to add additional field on scheduled job New/Edit screen using hook.
  
  ```
      function jobextra_civicrm_buildForm($formName, &$form) {
        if ($formName == 'CRM_Admin_Form_Job') {
          $form->add('datepicker', 'job_date_time_start', ts('Date & Time Start'), NULL, FALSE, ['minDate' => date('Y-m-d')]);
          $form->add('datepicker', 'job_date_time_end', ts('Date & Time End'), NULL, FALSE, ['minDate' => date('Y-m-d')]);
          // there are other non date related field
        }
      }
  
  ```
  
  and supporting extra.tpl file `templates/CRM/Admin/Page/Job.extra.tpl`
  
  ```
  {literal}
  <script type="text/javascript">
      CRM.$(document).ready(function() {
          CRM.$('.crm-job-form-block-name_job_date_time_end').insertAfter('.crm-job-form-block-run_frequency');
          CRM.$('.crm-job-form-block-name_job_date_time_start').insertAfter('.crm-job-form-block-run_frequency');
           // other fields are inserted...
      });
  
  </script>
  {/literal}
  <table style="display:none;">
      <tr class="crm-job-form-block-name_job_date_time_start" style="">
          <td class="label">{$form.job_date_time_start.label}</td>
          <td>{$form.job_date_time_start.html}
          </td>
      </tr>
      <tr class="crm-job-form-block-name_job_date_time_end" style="">
          <td class="label">{$form.job_date_time_end.label}</td>
          <td>{$form.job_date_time_end.html}</td>
      </tr>
  </table>
  
  ```
  
  Date field is not rendering correctly, instead of showing date picker field and time field, i am just seeing simple textfield.
  
  If i put these 2 field into core `templates/CRM/Admin/Form/Job.tpl`, both field rendered correctly.
  
  Since this is in `extra.tpl` , tpl file load outside `crm-container`, and then we moving these field using jQuery into right position inside `crm-container`.
  
  that may be issue?.
  
  **Tags:** extension, scheduled-job
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-09-03. Score: 1
  
  You need to initialize datepicker field
  
  ```
  $('input[name="job_date_time_end"]').datepicker();
  
  ```
  
  
  ---
  
  