title: Django datetimefield not showing datetimepicker widget for new inline form rows
body: <p>In regards to the image below, when I click "add entry", the new entry row no longer has the datetimepicker widget. Which is odd because it has the right class. The +1 field represents the django form auto-added additional field. Which seems to work fine. It's only the fields that are added after the page has rendered which may be a key to the solution. </p>
  
  <p>I am using the flatpickr package as my datetimepicker widget.  </p>
  
  <p><a href="https://i.stack.imgur.com/qGVJc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qGVJc.png" alt="https://i.imgur.com/FKQC1iu.png"></a></p>
  
  <p>trade_form.html</p>
  
  <pre><code>{% extends 'dashboard/base.html' %}
  {% load static %}
  
  {% block content %}
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="{% static 'js/formset/jquery.formset.js' %}"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/flatpickr"&gt;&lt;/script&gt;
  
  
  &lt;!-- Page Heading --&gt;
  &lt;div class="d-sm-flex align-items-center justify-content-between mb-3"&gt;
      &lt;h2&gt;New Trade&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col"&gt;
          &lt;form action="" method="post"&gt;{% csrf_token %}
              {{ form.media }}
              {{ form.as_p }}
  
              &lt;table class="table"&gt;
                  {{ entries.management_form }}
  
                  {% for form in entries.forms %}
                  {% if forloop.first %}
                  &lt;thead&gt;
                  &lt;tr&gt;
                      {% for field in form.visible_fields %}
                      &lt;th&gt;{{ field.label|capfirst }}&lt;/th&gt;
                      {% endfor %}
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  {% endif %}
                  &lt;tr class="{% cycle row1 row2 %} formset_row"&gt;
                      {% for field in form.visible_fields %}
                      &lt;td&gt;
                          {# Include the hidden fields in the form #}
                          {% if forloop.first %}
                          {% for hidden in form.hidden_fields %}
                          {{ hidden }}
                          {% endfor %}
                          {% endif %}
                          {{ field.errors.as_ul }}
                          {{ field }}
                      &lt;/td&gt;
                      {% endfor %}
                  &lt;/tr&gt;
                  {% endfor %}
              &lt;/table&gt;
              &lt;input type="submit" value="Save"/&gt; &lt;a href="{% url 'trade-list' %}"&gt;back to the list&lt;/a&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $('.formset_row').formset({
          addText: 'add entry',
          deleteText: 'remove',
          prefix: 'entry_set'
      });
  
  &lt;/script&gt;
  
  &lt;!-- Makes DateTimeFields Show Picker--&gt;
  &lt;script&gt;
      // This code activates flatpickr on fields with the 'datetimefield' class when the document has loaded
      window.addEventListener("DOMContentLoaded", function () {
          flatpickr(".datetimefield", {
              enableTime: true,
              enableSeconds: true,
              dateFormat: "Y-m-d H:i:S",
          });
      });
  &lt;/script&gt;
  
  {% endblock content %}
  </code></pre>
  
  <p>forms.py</p>
  
  <pre><code>class EntriesForm(ModelForm):
      class Meta:
          model = Entry
          exclude = ()
          widgets = {
              'date': forms.DateTimeInput(format='%Y-%m-%d %H:%M:%S', attrs={'class': 'datetimefield'}),
          }
  
      # Adding default class to every visible field 
  
      def __init__(self, *args, **kwargs):
          super(EntriesForm, self).__init__(*args, **kwargs)
          for field_name, field in self.fields.items():
              if field.widget.attrs.get('class'):
                  field.widget.attrs['class'] += ' form-control'
              else:
                  field.widget.attrs['class'] = 'form-control'
  
  EntriesFormSet = inlineformset_factory(Trade, Entry, form=EntriesForm, extra=1)
  </code></pre>
  
  <hr>
  
  <p><strong>Updated trade_form.html scripts but with still no luck.</strong>
  So far this code just removed the datetimepicker widget on the fields that were already working. So it may just be a format issue.</p>
  
  <pre><code>&lt;!-- Makes DateTimeFields Show Picker--&gt;
  &lt;script&gt;
      // This code activates flatpickr on fields with the 'datetimefield' class when the document has loaded
      window.addEventListener(
  
          "DOMContentLoaded", function () {
              flatpickr(".datetimefield", {
                  enableTime: true,
                  enableSeconds: true,
                  dateFormat: "Y-m-d H:i:S",
              });
          }
  
          "added", function() {
              flatpickr(".datetimefield", {
                  enableTime: true,
                  enableSeconds: true,
                  dateFormat: "Y-m-d H:i:S",
              });
  
          }
  
      );
  &lt;/script&gt;
  </code></pre>