$().datepicker не является функцией
Я добавил функцию выбора даты, но не могу ее использовать. Я считаю, что делаю какую-то фундаментальную ошибку, так как я новичок в javascript и jQuery.
входной тег находится в файле приглашения.html, который я включаю, используя теги шаблона django, все файлы jquery и семантические файлы, которые я загрузил в статическую папку. Я также добавил файлы datepicker.js. Заранее спасибо. Я добавил и предупредил в скрипте выбора даты, он работал нормально, поэтому я думаю, что функция добавлена правильно, но
Я получаю эти ошибки:
jQuery.Deferred exception: $(...).datepicker is not a function
TypeError: $(...).datepicker is not a function
Scholarship.html — это основной html-файл, в который я включил файл приглашения.html, а входной тег id="datepicker" выделен полужирным шрифтом, а функция, которая его генерирует, выделена жирным шрифтом.
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>
Стипендия.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" });
@Andreas Андреас Я думал так же, но если бы jQuery отсутствовал, ошибка была бы $ is undefined. Если только $ не назначен другому фреймворку... В любом случае здесь недостаточно информации, чтобы помочь.
Наиболее вероятной причиной этой проблемы является то, что {% static 'globals/js/datepicker.js' %} завершается ошибкой 404. Проверьте вкладку «Сеть» инструментов разработчика вашего браузера. Следующая наиболее вероятная причина заключается в том, что вы дважды загружаете jQuery и перезаписываете версию с прикрепленным к ней средством выбора даты. Однако в вопросе недостаточно информации, чтобы с какой-либо степенью уверенности сказать, в чем заключается настоящая проблема.
ваш datepicker.js не загружен. Возможно, это {% static 'globals/js/datepicker.js' %} вызывает проблему.
@RoryMcCrossan Из-за "Исключение jQuery.Deferred:..." должно быть включение для jQuery или оно должно быть частью одного из включений. Отсюда мое предположение о неправильном порядке.
Что ж, ребята, порядок импорта в base.html может вызывать проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});#ui-datepicker-div { font-size: 12px; } <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"></script>
Date Picker: <input type = "text" id = "date1" name = "date1"/> <br/>You should add this below script into your site.. after that your error will be remove.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
Где/когда включен jQuery? Должен быть включен до
datepicker.js(и Semantic-UI)