title: getting Jquery's datepicker to work with Django DateField form
body: <p>I am following a tutorial on using jquery datepicker at <a href="http://hexonio.com/blog/2012/03/07/calendar-picker-django-forms/" rel="nofollow noreferrer">http://hexonio.com/blog/2012/03/07/calendar-picker-django-forms/</a>.</p>
  
  <p>My form is a simple DateField:</p>
  
  <pre><code>class CalendarForm(forms.Form):
      field1 = forms.DateField()
  </code></pre>
  
  <p>I installed the datepicker as instructed:</p>
  
  <pre><code>   ...
      $(function() {
          $( "id_field1" ).datepicker();
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The tutorial says to install jquery locally, so from <a href="http://jqueryui.com/download" rel="nofollow noreferrer">http://jqueryui.com/download</a> I picked 1.11.14 as it said "stable", and unzipped it to a jquery folder in media:</p>
  
  <pre><code>cchilders@cody_pc:~/projects/django_projects/bookmarks_tracker/media/jquery/jquery-ui-1.11.4.custom$ ls
  external    jquery-ui.css      jquery-ui.min.js             jquery-ui.theme.css
  images      jquery-ui.js       jquery-ui.structure.css      jquery-ui.theme.min.css
  index.html  jquery-ui.min.css  jquery-ui.structure.min.css
  </code></pre>
  
  <p>I installed all of them in 'base.html' to be safe:</p>
  
  <p><code>base.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
  
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Sitename&lt;/title&gt;
  
          &lt;link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.css" rel="Stylesheet" /&gt;
          &lt;link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="Stylesheet" /&gt;
          &lt;link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="Stylesheet" /&gt;
          &lt;link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css" rel="Stylesheet" /&gt;
          &lt;link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="Stylesheet" /&gt;
          &lt;link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css" rel="Stylesheet" /&gt;
          &lt;script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Load javascript libraries --&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"&gt;&lt;/script&gt; 
  
          &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"&gt;
          &lt;link href="/media/css/main.css" rel="stylesheet" type="text/css" /&gt;
  
          &lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /&gt;
          &lt;!-- &lt;link href="static/select2/css/select2.min.css" rel="stylesheet" /&gt;
          &lt;script src="static/select2/js/select2.min.js"&gt;&lt;/script&gt; --&gt;
  
          &lt;!-- semantic --&gt;
          &lt;link href="https://cdnjs.com/libraries/semantic-ui" rel="stylesheet"/&gt;
  </code></pre>
  
  <p>I have installed all the files there into base, but the datepicker does not work. When I comment out <code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;</code>, no jquery at all on the page works. So the jquery I unzipped isn't working, but I think it finds the files with a 304 redirect:</p>
  
  <pre><code>127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /silo/ HTTP/1.1" 200 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.theme.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.structure.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.js HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/css/main.css HTTP/1.1" 304 -
  127.0.0.1 - - [28/Sep/2015 16:32:21] "GET /media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.js HTTP/1.1" 304 -
  </code></pre>
  
  <p>The form is <code>calendar_form</code> in the template...</p>
  
  <p><code>silo.html</code>:</p>
  
  <pre><code>{% if articles %}
  
          &lt;div style="width:94%;"&gt;
              {% if tags %}
                  &lt;div class="help-text"&gt;
                      &lt;p&gt;You can filter your articles by tags. Articles with the most tags matched come first, and all articles that have at least one tag will show up.&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;h4&gt;Tags&lt;/h4&gt;
                      &lt;form id="category_form" method="post" action="{% url 'index:silo' %}" enctype="multipart/form-data"&gt;
                            {% csrf_token %}
  
                            &lt;section id="multiple" class="row"&gt;
                                &lt;div class="col-md-8"&gt;
                                    &lt;span&gt;
                                        &lt;select  style="width:90%;" multiple="multiple" id="selected_tags" name="selected_tags"&gt;
                                            {% for tag in tags %}        
                                                &lt;option value="{{tag.slug}}"&gt;{{tag.name}}&lt;/option&gt;
                                            {% endfor %}
                                        &lt;/select&gt;                
                                    &lt;/span&gt;
                                 &lt;/div&gt;
                            &lt;/section&gt;
                            &lt;br/&gt;
                            {{ calendar_form }}
                            &lt;input type="submit" name="submit" value="Search"/&gt;
                            &lt;br/&gt;
                      &lt;/form&gt;
                      &lt;br/&gt;
                  &lt;/div&gt;
              {% endif %}
  </code></pre>
  
  <p>I checked that registering it in jquery as <code>id_field1</code> was correct to be sure, and it is <code>id_field1</code>. </p>
  
  <p>The confusing part is how my other jquery items work (toggle, swapping classes, swapping text, ajax request, select2 and so on), but this datepicker doesn't.</p>
  
  <p>How can I get this datepicker to work as a calendar you can scroll through and pick dates like normal, with either inline or externally linked jquery?</p>
  
  <p>Thank you</p>
  
  <p><a href="https://i.stack.imgur.com/6A4lp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6A4lp.png" alt="enter image description here"></a></p>
  
  <p>This console errors are as follows:</p>
  
  <p>Uncaught ReferenceError: jQuery is not defined 
  from my jquery-ui.js</p>
  
  <p>Uncaught ReferenceError: jQuery is not defined 
  from my jquery-ui.min.js</p>
  
  <p>Uncaught TypeError: $(...).datepicker is not a function from the page accessed (<a href="http://127.0.0.1:8000/silo/" rel="nofollow noreferrer">http://127.0.0.1:8000/silo/</a>)</p>
  
  <p>If I comment out my local jquery files and leave the cloudfare one, it still says "datepicker is not a function" but the docs say it is <a href="http://api.jqueryui.com/datepicker/" rel="nofollow noreferrer">http://api.jqueryui.com/datepicker/</a></p>
  
  <p><a href="https://i.stack.imgur.com/vlEgT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vlEgT.png" alt="enter image description here"></a></p>
  
  <p>Putting </p>
  
  <pre><code>&lt;script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.js"&gt;&lt;/script&gt; 
          &lt;script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>at the top before the CSS causes a boatload of problems:</p>
  
  <p><a href="https://i.stack.imgur.com/qMiO7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qMiO7.png" alt="enter image description here"></a></p>