JQuery Datepicker and datatable information removed

JQuery Datepicker replaced by html 5 'date' component.

cydiapomonella/templates/cydiapomonella/index.html

 {% extends "base.html" %}
-{% load static %}
-
 {% load staticfiles %}
-
-
 {% comment %}
 
 #
@@ -48,8 +44,16 @@
 
 
 {% endblock %}
-
+{% block customCSS %}
+    <style>
+        .navbar-default {
+            background-color: #fff;
+            border-color:#fff;
+        }
+    </style>
+{% endblock %}
 {% block customJS %}
+{% csrf_token %}
 <script type="text/javascript">
     var CONST_TIMEZONE  =   'Europe/Oslo';
     var dateToday       =   new Date();
@@ -62,6 +66,7 @@
     var jsonMeasurdData     =   "";
 
     $(function(){
+        document.getElementById('idTxtDateInput').setAttribute("max", JSON.stringify(dateYesterday).substring(1,11));
         $('#idTxtDateInput').removeClass('hasDatepicker');
     });
 
@@ -95,6 +100,7 @@
     }
 
     /* Date input  to get heat sum calculation */
+  /*
     $('#idTxtDateInput').datepicker({
         dateFormat: 'yy-mm-dd',
         showOn: "both",
@@ -104,6 +110,13 @@
             funDtPickerHeatSum();
          }
     });
+  */
+
+  $('#idTxtDateInput').change(function(){
+    funDtPickerHeatSum();
+  });
+    
+
 
     /* On change of drop down for weather stations */
     $('#weatherStationId').change(function(){
@@ -135,7 +148,8 @@
                 jsonHourlyData          =   getAjaxHourlyData(jsonParamUrlDataHourly);
 
             
-                $('#idTxtDateInput').datepicker("setDate",dateStartDate);
+                //$('#idTxtDateInput').datepicker("setDate",dateStartDate);
+                document.querySelector("#idTxtDateInput").valueAsDate = dateStartDate;
                 /*Calling function to calculate and place heatsum value based upon date placed on datepicker*/
                 funDtPickerHeatSum();
 
@@ -316,7 +330,7 @@
         if($.trim(weatherData))
                             {
                                 $('#idTableWeather').DataTable({
-                                    "sDom":  '<t><"col-sm-5"i><"clearfix">', 
+                                    "sDom":  '<t><"clearfix">', 
 									"lengthMenu": [[50, -1], ["All"]],
                                     "aaData" : weatherData,
                                     "aoColumns" : 
@@ -491,11 +505,11 @@
 {% block content %}
 
  
-<center>
-<div class="alert alert-info"   role="alert">
-    <h3>Calculate the risk of attack by apple wrap</h3>
-  </div>
-</center>
+
+<div class="col-md-12" >
+    <h1>Calculate the risk of attack by apple wrap</h1>
+</div>
+
 
 <div class="container-fluid">
     <div class="row ">
@@ -571,7 +585,7 @@
             <div class="form-group form-inline">
 
                 <label for="nameTxtDateInput">Calculate heat sum from Date:</label>
-                <input id="idTxtDateInput" name="nameTxtDateInput" class="notranslate form-control" readonly/>
+                <input id="idTxtDateInput" name="nameTxtDateInput" class="form-control" type="date" placeholder="yyyy-mm-dd" onkeydown="return false" value="2020-01-01"/>
             </div>
             <!-- button type="submit" class="btn btn-default">Submit</button -->
         </form>