title: $().datepicker is not a function
body: <p>I have added the datepicker function but I am not able to use it. I believe that it is I am doing some fundamental mistake since I am a beginner in javascript and jQuery.</p>
  
  <p>The <strong>input tag</strong> is in the invite.html file which I am including using django's template tags all the jquery and semantic files I have downloded them in the static folder. I have added the datepicker.js files also I.Thanks in advance. I added and alert in the datepicker script it worked fine, So I think it is the function is added properly but </p>
  
  <p>I get these errors:</p>
  
  <blockquote>
    <p>jQuery.Deferred exception: $(...).datepicker is not a function<br>
    TypeError: $(...).datepicker is not a function</p>
  </blockquote>
  
  <p>Scholarship.html is the main html file in which I have included the invite.html file and the input tag id="datepicker" is in bold in invite.html the fuction that is generating the is in bold. </p>
  
  <p>base.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Fusion!
          {% block title %}{% endblock %}
      &lt;/title&gt;
  
      {% load staticfiles %}
      &lt;link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/reset.css' %}"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/icon.css' %}"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic.min.css' %}"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{% static 'globals/css/mediaquery.css' %}"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic-notify.css' %}"&gt;
  
      &lt;script type="text/javascript" src="{% static 'globals/js/jquery.min.js' %}"&gt; &lt;/script&gt;
      &lt;script type="text/javascript" src="{% static 'globals/js/jquery.formset.js' %}"&gt; &lt;/script&gt;
      &lt;script type="text/javascript" src="{% static 'globals/js/semantic-notify.js' %}"&gt; &lt;/script&gt;
      &lt;script type="text/javascript" src="{% static 'globals/js/ajax-post.js' %}"&gt;&lt;/script&gt;
      {% block css %}
      {% endblock %}
  
  &lt;/head&gt;
  
  {% comment %}style="background-color: rgba(189, 189, 189, 0.1);"{% endcomment %}
  &lt;body id="body"&gt;
  
  {% block body %}
      {% block navBar %}
      {% endblock %}
  {% endblock %}
  
      &lt;div id="messages"&gt;
          {% for message in messages %}
              &lt;div class="message" tag="{% if 'success' in message.tags %}green{% elif 'error' in message.tags %}red{% else %} blue {% endif %}" message="{{ message|safe }}"&gt;&lt;/div&gt;
          {% endfor %}
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script type="text/javascript" src="{% static 'globals/js/semantic.min.js' %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{% static 'globals/js/dropdown.js' %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{% static 'globals/js/tab.js' %}"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      $(document).ready(function() {
  
          $('#messages').find('.message').each(function(){
              $.uiAlert({
                  textHead: $(this).attr('message'), // header
                  text: '',
                  bgcolor: $(this).attr('tag'), // background-color
                  textcolor: '#fff', // color
                  position: 'bottom-left',// position . top And bottom ||  left / center / right
                  time: 3, // time
              });
          });
  
          $('#new-notification')
              .popup({
                  inline: true,
                  hoverable: true,
                  position: 'bottom left',
                  popup: $('#notificationPopup'),
                  on: 'click',
                  delay: {
                      show: 250,
                      hide: 500
                  }
              })
          ;
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Scholarship.html</p>
  
  <pre><code>    {% extends 'globals/base.html' %}
          {% load static %}
  
  
          {% block title %}
              Awards &amp; Scholarship
          {% endblock %}
  
  
          {% block body %}
              {% block navBar %}
                  {% include 'dashboard/navbar.html' %}
              {% endblock %}
  
                          {% block winners %}
                              {% include 'scholarshipsModule/winners.html' with winners=winners %}
                          {% endblock %}
                      &lt;/div&gt;
                      {% comment %}The Personal Details end here!{% endcomment %}
  
  
                      {% comment %}The Publications starts here!{% endcomment %}
                      &lt;div class="ui tab segment" data-tab="second"&gt;
                          {% block invite %}
                              {% include 'scholarshipsModule/invite.html' with release=release ch=ch time=time awards=awards form=form %}
                          {% endblock %} *invite.html is included here*
                      &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% comment %}The right-rail segment ends here!{% endcomment %}
  
                  {% comment %}The right-margin segment!{% endcomment %}
                  &lt;div class="column"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
  
  
          {% endblock %}
  
  
  
          {% block javascript %}
              &lt;script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="{% static 'globals/js/datepicker.js' %}"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="{% static 'globals/js/tablesort.js' %}"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="{% static 'globals/js/editProfile.js' %}"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="{% static 'globals/js/modal.js' %}"&gt;&lt;/script&gt;
              &lt;script&gt;
                      $('.message .close')
                .on('click', function() {
                  $(this)
                    .closest('.message')
                    .transition('fade')
                  ;
                })
              ;
                  **$( function() {
                      $( "#datepicker" ).datepicker(); This is the code that generates the error
                  } );**
                  &lt;/script&gt;
          {% endblock javascript %}
  
  
  invite.html
          {% load static %}
          {% block winners %}
  
  
                          &lt;div class="two fields"&gt;
                              &lt;div class="field"&gt;
                                  &lt;label&gt;Start date&lt;/label&gt;
  
                                      &lt;div class="ui input large left icon"&gt;
                                          &lt;i class="calendar icon"&gt;&lt;/i&gt;
                                          **&lt;input id="datepicker" type="text" name="From" placeholder="YYYY-MM-DD" required&gt;
                                      &lt;/div&gt;**
  
                              &lt;/div&gt;
  
                              &lt;div class="field"&gt;
                                  &lt;label&gt;End Date&lt;/label&gt;
  
                                      &lt;div class="ui input large left icon"&gt;
                                          &lt;i class="calendar icon"&gt;&lt;/i&gt;
                                          &lt;input type="text" name="To" placeholder="YYYY-MMM-DD" required&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
  
                      &lt;div class="ui divider"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          {% endblock %}
  
  This is the datepicker.js fuction which is their in the globals/js folder 
  
  datepicker.js script
          $('.rangestart').calendar({
              type: 'date',
          });
          $('.rangeend').calendar({
              type: 'date',
          });
  
          $(".date.calendar").calendar({ type: "date" });
  </code></pre>