Fatal编程技术网
  • javascript/
  • Javascript $（）。日期选择器不是函数

Javascript $（）。日期选择器不是函数

javascript jquery html

Javascript $（）。日期选择器不是函数,javascript,jquery,html,Javascript,Jquery,Html,我添加了datepicker函数，但无法使用它。我相信我犯了一些基本的错误，因为我是javascript和jQuery的初学者 输入标记位于invite.html文件中，我正在使用django的模板标记将所有jquery和语义文件下载到静态文件夹中。我也添加了datepicker.js文件。提前谢谢。我在datepicker脚本中添加了和alert，它工作得很好，所以我认为它是正确添加了函数，但是 我发现以下错误： jQuery.Deferred异常：$（…）.datepicker不是函数 Ty

我添加了datepicker函数，但无法使用它。我相信我犯了一些基本的错误，因为我是javascript和jQuery的初学者

输入标记位于invite.html文件中，我正在使用django的模板标记将所有jquery和语义文件下载到静态文件夹中。我也添加了datepicker.js文件。提前谢谢。我在datepicker脚本中添加了和alert，它工作得很好，所以我认为它是正确添加了函数，但是

我发现以下错误：

jQuery.Deferred异常：$（…）.datepicker不是函数
TypeError:$（…）。日期选择器不是函数

Scholarship.html是主html文件，我在其中包含了invite.html文件，输入标记id=“datepicker”在invite.html中以粗体显示。生成函数的函数以粗体显示

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fusion!
        {% block title %}{% endblock %}
    </title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/semantic-ui/components/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/css/mediaquery.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'globals/css/semantic-notify.css' %}">

    <script type="text/javascript" src="{% static 'globals/js/jquery.min.js' %}"> </script>
    <script type="text/javascript" src="{% static 'globals/js/jquery.formset.js' %}"> </script>
    <script type="text/javascript" src="{% static 'globals/js/semantic-notify.js' %}"> </script>
    <script type="text/javascript" src="{% static 'globals/js/ajax-post.js' %}"></script>
    {% block css %}
    {% endblock %}

</head>

{% comment %}style="background-color: rgba(189, 189, 189, 0.1);"{% endcomment %}
<body id="body">

{% block body %}
    {% block navBar %}
    {% endblock %}
{% endblock %}

    <div id="messages">
        {% for message in messages %}
            <div class="message" tag="{% if 'success' in message.tags %}green{% elif 'error' in message.tags %}red{% else %} blue {% endif %}" message="{{ message|safe }}"></div>
        {% endfor %}
    </div>
</body>

<script type="text/javascript" src="{% static 'globals/js/semantic.min.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/dropdown.js' %}"></script>
<script type="text/javascript" src="{% static 'globals/js/tab.js' %}"></script>

<script>

    $(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
                }
            })
        ;
    });
</script>


融合！
{%block title%}{%endblock%}
{%load staticfiles%}
{%block-css%}
{%endblock%}
{%comment%}style=“背景色：rgba（1891891891890.1）；”{%endcomment%}
{%block body%}
{%block navBar%}
{%endblock%}
{%endblock%}
{消息%中的消息为%s}
{%endfor%}
$（文档）.ready（函数（）{
$（'#messages'）。查找（'.message'）。每个（函数（）{
$.uiAlert({
text头：$（this.attr（'message'），//头
文本：“”，
bgcolor:$（this.attr（'tag'），//背景色
text颜色：'#fff'，//颜色
位置：'左下'，//位置。上下| | |左/中/右
时间：3，//时间
});
});
$（“#新通知”）
.弹出窗口({
是的，
悬停：是的，
位置：'左下'，
弹出窗口：$（'notificationPopup'），
在“单击”上，
延迟：{
节目：250，
藏品：500
}
})
;
});
Scholarship.html

    {% extends 'globals/base.html' %}
        {% load static %}


        {% block title %}
            Awards & Scholarship
        {% endblock %}


        {% block body %}
            {% block navBar %}
                {% include 'dashboard/navbar.html' %}
            {% endblock %}

                        {% block winners %}
                            {% include 'scholarshipsModule/winners.html' with winners=winners %}
                        {% endblock %}
                    </div>
                    {% comment %}The Personal Details end here!{% endcomment %}


                    {% comment %}The Publications starts here!{% endcomment %}
                    <div class="ui tab segment" data-tab="second">
                        {% block invite %}
                            {% include 'scholarshipsModule/invite.html' with release=release ch=ch time=time awards=awards form=form %}
                        {% endblock %} *invite.html is included here*
                    </div>

                    </div>
                </div>
                {% comment %}The right-rail segment ends here!{% endcomment %}

                {% comment %}The right-margin segment!{% endcomment %}
                <div class="column"></div>

            </div>


        {% endblock %}



        {% block javascript %}
            <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
            <script type="text/javascript" src="{% static 'globals/js/datepicker.js' %}"></script>
            <script type="text/javascript" src="{% static 'globals/js/tablesort.js' %}"></script>
            <script type="text/javascript" src="{% static 'globals/js/editProfile.js' %}"></script>
            <script type="text/javascript" src="{% static 'globals/js/modal.js' %}"></script>
            <script>
                    $('.message .close')
              .on('click', function() {
                $(this)
                  .closest('.message')
                  .transition('fade')
                ;
              })
            ;
                **$( function() {
                    $( "#datepicker" ).datepicker(); This is the code that generates the error
                } );**
                </script>
        {% endblock javascript %}


invite.html
        {% load static %}
        {% block winners %}


                        <div class="two fields">
                            <div class="field">
                                <label>Start date</label>

                                    <div class="ui input large left icon">
                                        <i class="calendar icon"></i>
                                        **<input id="datepicker" type="text" name="From" placeholder="YYYY-MM-DD" required>
                                    </div>**

                            </div>

                            <div class="field">
                                <label>End Date</label>

                                    <div class="ui input large left icon">
                                        <i class="calendar icon"></i>
                                        <input type="text" name="To" placeholder="YYYY-MMM-DD" required>
                                    </div>
                                </div>


                    <div class="ui divider"></div>
                </div>
            </div>
        {% 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" });

{%extends'globals/base.html%}
{%load static%}
{%block title%}
奖项及奖学金
{%endblock%}
{%block body%}
{%block navBar%}
{%include'仪表板/navbar.html%}
{%endblock%}
{%block winners%}
{%include'scholarshipsModule/winners.html'，winners=winners%}
{%endblock%}
{%comment%}个人详细信息到此结束！{%endcomment%}
{%comment%}发布从这里开始！{%endcomment%}
{%block invite%}
{%include'scholarshipsModule/invite.html'，release=release ch=ch time=time awards=awards form=form%}
{%endblock%}*此处包含invite.html*
{%comment%}右侧轨道段在此结束！{%endcomment%}
{%comment%}右边距段！{%endcomment%}
{%endblock%}
{%block javascript%}
$（'.message.close'）
.on（'单击'，函数（））{
$（本）
.closest（“.message”）
.transition（'fade'）
;
})
;
**$（函数（）{
$（“#datepicker”）.datepicker（）；这是生成错误的代码
} );**
{%endblock javascript%}
invite.html
{%load static%}
{%block winners%}
开始日期
**
**
结束日期
{%endblock%}
这是datepicker.js函数，它位于globals/js文件夹中
datepicker.js脚本
$（'.rangestart'）。日历({
键入：“日期”，
});
$（'.rangeend'）。日历({
键入：“日期”，
});
$（.date.calendar”）.calendar（{type:“date”}）；

$（'#date1'）。日期选择器({
变化月：对，
变化年：是的，
showButtonPanel：是的，
日期格式：“年月日”
});

#ui日期选择器div{font size:12px；}



日期选择器：

您应该将下面的脚本添加到您的站点中。。之后，您的错误将被删除




jQuery包含在哪里/何时？它必须包含在
datepicker.js
（和语义UI）之前@Andreas我也这么认为，但是如果jQuery缺失，那么错误将是
$is undefined
。除非将
$
分配给另一个框架。。。无论哪种方式，这里都没有足够的信息提供帮助。此问题最可能的原因是
{%static'globals/js/datepicker.js%}
最终导致404。检查浏览器开发人员工具的“网络”选项卡。下一个最可能的原因是您加载了两次jQuery，并使用附加的datepicker覆盖了该版本。问题中没有足够的信息来说明真正的问题是什么

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>