date time pickers in admin pages missing.

Using Django Templates & Frontend
1

The datetime field model elements are now missing the date and time pickers in the admin pages.

Here is one of the models.

class BroadcastNotification(models.Model):
message = models.TextField()
broadcast_on = models.DateTimeField()
sent = models.BooleanField(default=False)

class Meta:
    ordering = ['-broadcast_on']

Here is the admin page for that model.

Add-broadcast-notification-Correlator-2-Administration
Add-broadcast-notification-Correlator-2-Administration620×533 35.2 KB

I suppose I should have labeled it missing pickers

Where should I look?

Here is my base.html

{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- Font Awesome CSS -->
    <script src="https://kit.fontawesome.com/5135d630a7.js" crossorigin="anonymous"></script>
    <title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{% if not is_popup and is_nav_sidebar_enabled %}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/nav_sidebar.css" %}">
  <script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>
{% endif %}

<style type="text/css">
    body { 
     background: url('{% static "\correlator\images\clouds.jfif" %}') no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    }
</style>
<style>
  .notification {
      background-color: #0d6efd;
      color: white;
      text-decoration: none;
      padding: 4px 24px;
      margin-right: 20px;
      margin-left: 20px;
      position: relative;
      display: inline-block;
      border-radius: 2px;
      font-size: 20px;
  }

  .notification:hover {
      background: #0b5ed7;
      color: #fff;
  }

  .notification .badge {
      position: absolute;
      top: -10px;
      right: -10px;
      padding: 8px 8px;
      border-radius: 50%;
      background: red;
      color: white;
  }

  .notification-section .dropdown-toggle::after {
      content: none;
  }

  .dropdown-toggle::after {
      color: #fff;
  }

  #notifications-dropdown li {
      max-width: 500px;
      word-wrap: break-word;
      display: inline-block;
      white-space: normal;
  }

  #notifications-dropdown.dropdown-menu {
      width: 15rem;
  }
  
</style>
<!-- {% block extrastyle %}{% endblock %}
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
{% block extrahead %}{% endblock %}
{% block responsive %}
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
    {% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}
{% endblock %} -->
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
</head>
{% load i18n %}


<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
  data-admin-utc-offset="{% now "Z" %}">

<!-- Container -->
<div id="container">

    {% if not is_popup %}
    <!-- Header -->
    <div id="header">
        <div id="branding">
        {% block branding %}{% endblock %}
        </div>
        {% block usertools %}
        {% if has_permission %}
        <div id="user-tools">
            {% block welcome-msg %}
                {% translate 'Welcome,' %}
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            {% endblock %}
            {% block userlinks %}
                {% if site_url %}
                    <a href="{{ site_url }}">{% translate 'View site' %}</a> /
                {% endif %}
                {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                        <a href="{{ docsroot }}">{% translate 'Documentation' %}</a> /
                    {% endif %}
                {% endif %}
                {% if user.has_usable_password %}
                <a href="{% url 'admin:password_change' %}">{% translate 'Change password' %}</a> /
                {% endif %}
                <a href="{% url 'admin:logout' %}">{% translate 'Log out' %}</a>
            {% endblock %}
        </div>
        {% endif %}
        {% endblock %}
        {% block nav-global %}{% endblock %}
    </div>
    <!-- END Header -->
    <!-- {% block breadcrumbs %}
    <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
    {% if title %} &rsaquo; {{ title }}{% endif %}
    </div>
    {% endblock %} -->
    {% endif %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- Font Awesome CSS  -->
    <script src="https://kit.fontawesome.com/5135d630a7.js" crossorigin="anonymous"></script>
    
    <div class="main shifted" id="main">
      {% if not is_popup and is_nav_sidebar_enabled %}
        {% block nav-sidebar %}
          {% include "admin/nav_sidebar.html" %}
        {% endblock %}
      {% endif %}
      <div class="content">
        {% block messages %}
          {% if messages %}
            <ul class="messagelist">{% for message in messages %}
              <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
            {% endfor %}</ul>
          {% endif %}
        {% endblock messages %}
        <!-- Content -->
        <div id="content" class="{% block coltype %}colM{% endblock %}">
          {% block pretitle %}{% endblock %}
          {% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
          {% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}
          {% block content %}
            {% block object-tools %}{% endblock %}
            {{ content }}
          {% endblock %}
          {% block sidebar %}{% endblock %}
          <br class="clear">
        </div>
        <!-- END Content -->
        {% block footer %}<div id="footer"></div>{% endblock %}
      </div>
    </div>
</div>
<!-- END Container -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>
        <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
          <div class="container-fluid">
              <a class="navbar-brand" href="/">Correlator 2</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                  aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item fs-5">
                          <a class="nav-link active" aria-current="page" href="/">Home .</a>
                      </li>
                      <li class="nav-item fs-5">
                          <a class="nav-link" href="/admin/">Admin Pages .</a>
                      </li>
                      <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                              data-bs-toggle="dropdown" aria-expanded="false">
                              Dropdown
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                              <li><a class="dropdown-item" href="#">Action</a></li>
                              <li><a class="dropdown-item" href="#">Another action</a></li>
                              <li>
                                  <hr class="dropdown-divider">
                              </li>
                              <li><a class="dropdown-item" href="#">Something else here</a></li>
                          </ul>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                      </li>
  
                  </ul>
  
                  <form class="d-flex">
                      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                      <button class="btn btn-outline-primary" type="submit">Search</button>
                  </form>
  
                  <li class="nav-item dropdown notification-section">
                      <a href="#" class="notification dropdown-toggle" id="navbarDropdown" role="button"
                          data-bs-toggle="dropdown" aria-expanded="true">
                          <span><i class='fa fa-bell'></i></span>
                          <span class="badge" id="notification-badge">0</span>
                      </a>
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown" id="notifications-dropdown"
                          data-popper-placement="bottom-end"
                          style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-70px, 42px, 0px);">
                          
                          {% for i in notifications %}
                          <li class="dropdown-item">{{i.message}}</li>
                          <hr class="dropdown-divider">
                          {% endfor %}
                          {% comment %} <li class='dropdown-item'>Hello</li>
                          <hr class="dropdown-divider"> {% endcomment %}
                          
                      </ul>
                  </li>
  
                  <div class="flex-shrink-0 dropdown" style="margin-right: 20px">
                      <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle show" id="dropdownUser2"
                          data-bs-toggle="dropdown" aria-expanded="true">
                          <img src="{% static 'mike-oliver.jpg' %}"" alt="MO" width="50" height="50"
                              class="rounded-circle">
                      </a>
                      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"
                          data-popper-placement="bottom-end"
                          style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-110px, 50px, 0px);">
                          <li><a class="dropdown-item" href="#">New project...</a></li>
                          <li><a class="dropdown-item" href="#">Settings</a></li>
                          <li><a class="dropdown-item" href="#">Profile</a></li>
                          <li>
                              <hr class="dropdown-divider">
                          </li>
                          <li><a class="dropdown-item" href="#">Sign out</a></li>
                      </ul>
                  </div>
  
              </div>
          </div>
      </nav>
      {{ room_name|json_script:"room-name" }}
      <script>
        const roomName = JSON.parse(document.getElementById('room-name').textContent);
        console.log('roomName follows');
        console.log(roomName);
        console.log('roomName precedes');
        console.log('window.location.host follows');
        console.log(window.location.host);
        console.log('window.location.host precedes');
        
        const notificationSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/notification/broadcast/'
        );

        notificationSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            //document.querySelector('#chat-log').value += (data.message + '\n');
            console.log('data follows');
            console.log(data);
            console.log('data precedes');
            
           
            document.getElementById("notifications-dropdown").innerHTML = "<li class='dropdown-item'>" + data + "</li><hr class='dropdown-divider'>" + document.getElementById("notifications-dropdown").innerHTML;
            document.getElementById("notification-badge").innerHTML = parseInt(document.getElementById("notification-badge").innerHTML) + 1;
        };

        notificationSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

      

       
    </script>

    {% block body %}{% endblock %}
    
</body>

{% block js %} {% endblock %}

</html>
2

Your title mentions the “admin pages”, but you’re showing a generic template named “base.html”. (The admin doesn’t use your templates unless you’ve done other work to make that happen.)

Please clarify - how is this template involved with this issue?

What does your ModelAdmin class look like?

3

I have not modified any of the admin pages, only the base.html as shown. Since I have not modified anything else I assumed that something there was the cause. The nav bar is across the whole solution, and the admin pages load under that.

I suppose I can change the design so the admin pages are not loaded under the base.html. I assume base_site.html would be where I do that.

Add-broadcast-notification-Correlator-2-Administration (2)
Add-broadcast-notification-Correlator-2-Administration (2)1773×670 118 KB

I took extends admin/base.html out of base_site.html but no change

4

The admin pages will only load within the base.html if you’ve put it in the templates/admin directory.

Get rid of all your templates out of your admin directory and see if the page is loading correctly with the system templates.

5

I changed the bootstrap code for the nav-bar removing bg-dark and see that the admin pages are overlapped by the nav-bar.
Add-broadcast-notification-Correlator-2-Administration (3)

will fix.

6

Ok removed all the files from /templates/admin/ and the admin pages load and behave normally, and the date and time pickers have returned.

Now the question is how to get the bootstrap nav-bar back on my pages and let the admin pages remain unchanged?

If I put my old base.html with its nav-bar in another directory such as /myapp/base.html and have all my pages extend that can I freely navigate back and forth? I will try that so just asking.

7

Your alternative is to examine the html generated by the admin page, identifying all the css and js being used by that page - and then ensuring that your templates, css, and js don’t interfere with any of it.

8

Ok moved my old base.html to /myapp/base.html and changed my pages to extend that and now I can go to and from admin pages freely, thanks.

However to facilitate inspect I turned off bg-dark in the navbar and found little black boxes on the right side of all my links in the navbar. see attached. could not find any hints in the bootstrap documentation. that should be the last of this thread.

localhost-8000-