UpdateView in Django is not loading time from datetimefield of database, is it crispy forms?

Question

I have a pretty simple form:

class OnSiteLogForUserForm(forms.ModelForm):
  def __init__(self, *args, **kwargs):
    super(OnSiteLogForUserForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper()  
    self.helper.form_class = 'form-horizontal'
    self.helper.label_class = 'col-lg-4'
    self.helper.field_class = 'col-lg-8'
    self.helper.add_input(Submit('submit', 'Submit'))


  class Meta:
    model=OnSiteLog

    fields = ('user', 'checkIn', 'checkOut', 'notes', 'location')

    widgets = {
     'checkIn':DateTimeInput(attrs={
          'class':'datepicker form-control',
          'id' : 'datetimepicker1',
          'tabindex' : '1',
          'placeholder' : 'MM/DD/YYYY hh:mm',          
          'autocomplete':'off',
      }, format='%m/%d/%Y'),
      'checkOut':DateTimeInput(attrs={
          'class':'datepicker form-control',
          'id' : 'datetimepicker2',
          'tabindex' : '2',
          'placeholder' : 'MM/DD/YYYY hh:mm',          
          'autocomplete':'off',
      }, format='%m/%d/%Y'),
      'location' : TextInput(attrs={'tabindex':'3', 'size': 40, 'placeholder':'Location'}),
      'notes' : Textarea(attrs={'tabindex':'4', 'placeholder':'Notes'}),
      
    }

This is loaded when an edit is clicked in the view

class LogUpdateView(UpdateView):                                                                                             

    model = OnSiteLog
    form_class = OnSiteLogForUserForm
    template_name = 'log/log_form.html'
    success_url = '/'
                                                                                         
    def get_context_data(self, **kwargs):
        context = super(LogUpdateView, self).get_context_data(**kwargs)
    
        log = context['object'] 
        context['log_id'] = log.id
        theLog = OnSiteLog.objects.get(pk=log.id)

    
        log_form = OnSiteLogForUserForm(instance=theLog)

        context['log_form'] = log_form 
    
        return context


    def post(self, request, *args, **kwargs):

        print("Posting...")

   
   
        super(LogUpdateView, self).post(request, *args, **kwargs)
        return HttpResponseRedirect(self.success_url) 

    def form_invalid(self, form):
        print("form is invalid")
        print(form.errors)
        return HttpResponse("form is invalid.. this is just an HttpResponse object")

But when the form comes up, the field for checkin or checkout has the date but no time... Now when I create it, the date picker does the time just fine. Also interesting it lets you save it without the time.

So not sure why my update loads the date but not the time, I even changed the form widget to DateTimeInput (it was DateInput) to no avail.

Not sure where to even look at this one, the html uses crispy forms:

{% extends "base.html" %}

{% load static %}

{% load crispy_forms_tags %}


{% block title %}Log Entry{% endblock %}

{% block page-js %}


        <script src="{% static 'js/jquery.min.js' %}"></script>
        <!-- jQuery UI -->
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

        <!-- Popper js -->
        <script src="{% static 'js/popper.min.js' %}"></script>
        <!-- Bootstrap js -->
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <!-- All js -->
        <script src="{% static 'js/uza.bundle.js' %}"></script>
        <!-- Active js -->
        <script src="{% static 'js/default-assets/active.js' %}"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>

      <script type="text/javascript">
           $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                        var j = jQuery.noConflict();
                        event.preventDefault();
                        j(this).ekkoLightbox();
                    });

            
            $(function() {
              var j = jQuery.noConflict();    
              //j('.dateinput').datepicker({ dateFormat: "M dd, yy" });
              //j('.dateinput').datepicker({ dateFormat: "mm/dd/yy" });
              j('#datetimepicker1').datetimepicker();
              j('#datetimepicker2').datetimepicker();
            });

          </script>

{% endblock %}

{% block content %}
   <div class="breadcrumb-area">


        <!-- Background Curve -->
        <div class="breadcrumb-bg-curve">
            <img src="{% static '/img/core-img/curve-5.png' %}" alt="">
        </div>
    </div>
<div class="container">
    <h2> Add a Log Entry {{ user.username }} </h2>
    <div class="row">
      <div class="col-sm">
            {% crispy form %}
      </div>
    </div>
</div>

{% endblock %}

Answer 1

The format for the DateTimeInput must be as described in this MDN page: https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings.

In the case of the DateTimeInput widget, the format needs to be: YYYY-mm-ddTHH:MM; that is a 'T' in the middle of that string. The format attribute's value therefore must be %Y-%m-%dT%I:%M.

For more information about the datetime format codes, see the official Python docs: https://docs.python.org/3/library/datetime.html#strftime-and-strptime-format-codes.