Question

我正在关注在http://hexonio.com/blog/2012/03/07/calendar-picker-django-forms/使用jquery datepicker的教程。

我的表单是一个简单的DateField：

class CalendarForm(forms.Form):
    field1 = forms.DateField()

我按照说明安装了datepicker：

   ...
    $(function() {
        $( "id_field1" ).datepicker();
    });

</script>

教程说要在本地安装jquery，所以从http://jqueryui.com/download我选择了1.11.14，因为它说＆＃34;稳定＆＃34;，并将其解压缩到媒体中的jquery文件夹：

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

我已将所有这些内容安装在＆＃39; base.html＆＃39;为了安全起见：

base.html：

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sitename</title>

        <link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.css" rel="Stylesheet" />
        <link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="Stylesheet" />
        <link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="Stylesheet" />
        <link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css" rel="Stylesheet" />
        <link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="Stylesheet" />
        <link type="text/css" href="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css" rel="Stylesheet" />
        <script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
        <script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>

        <!-- Load javascript libraries -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 

        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
        <link href="/media/css/main.css" rel="stylesheet" type="text/css" />

        <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
        <!-- <link href="static/select2/css/select2.min.css" rel="stylesheet" />
        <script src="static/select2/js/select2.min.js"></script> -->

        <!-- semantic -->
        <link href="https://cdnjs.com/libraries/semantic-ui" rel="stylesheet"/>

我已将所有文件安装到base中，但是datepicker不起作用。当我注释掉<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>时，页面上根本没有jquery工作。因此我解压缩的jquery不起作用，但我认为它找到了带有304重定向的文件：

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 -

模板中的表单为calendar_form ...

silo.html：

{% if articles %}

        <div style="width:94%;">
            {% if tags %}
                <div class="help-text">
                    <p>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.</p>
                </div>

                <div>
                    <h4>Tags</h4>
                    <form id="category_form" method="post" action="{% url 'index:silo' %}" enctype="multipart/form-data">
                          {% csrf_token %}

                          <section id="multiple" class="row">
                              <div class="col-md-8">
                                  <span>
                                      <select  style="width:90%;" multiple="multiple" id="selected_tags" name="selected_tags">
                                          {% for tag in tags %}        
                                              <option value="{{tag.slug}}">{{tag.name}}</option>
                                          {% endfor %}
                                      </select>                
                                  </span>
                               </div>
                          </section>
                          <br/>
                          {{ calendar_form }}
                          <input type="submit" name="submit" value="Search"/>
                          <br/>
                    </form>
                    <br/>
                </div>
            {% endif %}

我检查过在jquery中注册它是因为id_field1是正确的，并且它是id_field1。

令人困惑的部分是我的其他jquery项目如何工作（切换，交换类，交换文本，ajax请求，select2等），但这个日期选择器没有。

如何将此日期选择器作为日历工作，您可以滚动浏览并选择正常的日期，使用内联或外部链接的jquery？

谢谢

此控制台错误如下：

未捕获的ReferenceError：未定义jQuery 来自我的jquery-ui.js

未捕获的ReferenceError：未定义jQuery 来自我的jquery-ui.min.js

未捕获的TypeError：$（...）。datepicker不是访问过的页面中的函数（http://127.0.0.1:8000/silo/）

如果我注释掉我的本地jquery文件并将云计算文件保留为一个，它仍然会说＆＃34; datepicker不是一个函数＆＃34;但是文档说这是http://api.jqueryui.com/datepicker/

放

<script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> 
        <script type="text/javascript" src="/media/jquery/jquery-ui-1.11.4.custom/jquery-ui.js"></script>

在CSS导致大量问题之前，

位于顶部：

Answer 1

您正在遇到控制台错误，因为您在jquery-ui.min.js之后加载了jquery.min.js。如果您交换订单，它应该工作。一般来说，由于很多插件都依赖于jquery，所以你应该将它放在JS声明的顶部。

让Jquery的datepicker与Django DateField表单

1 个答案: