Search code examples
djangodjango-templatesdjango-staticfiles

how to add static to my scripts in django

i have a datetimepicker created in js, but i have a little problem adding a static tag to my base.html,if i do, i wont get what i want or what i have written in my js its just rendering a normal html,i want it to be in a way in which once clicked it shows the date and time as stated in my js, here is what i have tried, everything is working perfectly except the date and time picker[here is the view] 1

base.html

##header

 {% load static %}
<html lang="en">
  <head>
    <title>{% block title %}Jazeera{% endblock title %}</title>
    <meta charset="utf-8">
    <meta name="description" content="{% block meta %}welcome to jazeera medical healthcare {% endblock meta %}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   {% block all %}
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
  
    <link rel="stylesheet" href="{% static 'css/animate.css' %}">
    
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">

    <link rel="stylesheet" href="{% static 'css/aos.css' %}">

    <link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
    
    <link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
    <link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
      <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">

  </head>

##footer

  <script src="{% static 'js/jquery.min.js' %}"></script>
  <script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
  <script src="{% static 'js/popper.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
  <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
  <script src="{% static 'js/jquery.stellar.min.js' %}"></script>
  <script src="{% static 'js/owl.carousel.min.js' %}"></script>
  <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
  <script src="{% static 'js/aos.js' %}"></script>
  <script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
  <script src="{% static 'js/scrollax.min.js' %}"></script>
  <script src="{% static 'js/bootstrap-datepicker.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
  <script src="{% static 'js/jquery.timepicker.min.js' %}" type="c9dfb692cab9a2d000c13798-text/javascript"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
  <script src="{% static 'js/google-map.js' %}"></script>
  <script src="{% static 'js/main.js' %}"></script>
  <script src="{% static 'js/jquery.js' %}"></script>
  <script src="{% static 'js/jquery.backstretch.min.js' %}"></script>

here is the displayed picture

Solution

  • i did it,i added it in plain,and added some styles to it my self

     <script src="{% static 'js/bootstrap-datepicker.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/jquery.timepicker.min.js' %}" type="text/javascript"></script>