如何在 Django 中使用 jQuery datetimepicker 插件

Question

我是 Django 的初学者，正在做我的第一个项目。对于网站的主要功能，我需要使用datetimepicker。由于无法使用 Bootstrap（与 Django 1.11 不兼容），看来我可以处理的唯一（？）选项是：jquery datetimepicker plugin。

我尝试配置它，但不幸的是我在我的站点上没有看到任何结果。我的代码：

Forms.py

time_from = forms.DateTimeField(widget=forms.DateTimeInput(attrs={'class': 'datetimepicker'}))

模板 - base.html

我将 jQuery 和 jQueryUI 放入静态目录，将它们的路径添加到 head 部分并在 html 标记和 head 之间添加{% load static %}。在文件的 and 处，我有指向 datetimepicker 的链接。

<html>
{% load static %}
    <head>
        <meta charset="utf-8">
        <title>placyk</title>
        <meta name="viewport" content="width-device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script type="text/javascript" src="{{ STATIC_URL }} /static/js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }} /static/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    </head>
    <body>
        {% block content %}
            <p>Nothing</p>
        {% endblock %}
    </body>
    <link rel="stylesheet" type="text/css" href="/static/datetimepicker-master/jquery.datetimepicker.css"/>
    <script src="/static/datetimepicker-master/jquery.js"></script>
    <script src="/static/datetimepicker-master/build/jquery.datetimepicker.full.min.js"></script>
</html>

模板 - 特定于视图，扩展 base.html

<html>
    {% extends 'base.html' %}
    <script>
        $(document).ready(function() {
            $('.datetimepicker').datetimepicker();
        });
    </script>
    {% block title %}<title>Dodaj wizytę</title>{% endblock %}
    {% block content %}        
    <form action="{% url 'add_visit' user.id %}" method='post'>
        {{form}}
        <input type='submit' value="Submit">
        {% csrf_token %}
    </form>
    {% if msg %}
        <a href='/home_login'>Strona główna</a>
        {{msg}}
    {% endif %}
    {% endblock %}
</html>

Views.py

class AddVisitView(LoginRequiredMixin, View):

    def get(self, request, id):
        user = User.objects.get(id=id)
        form = AddVisitForm(user=user)
        ctx = {'form': form, 'user': user}
        return TemplateResponse(request, 'add_visit.html', ctx)

    def post(self, request, id):
        user = User.objects.get(id=id)
        form = AddVisitForm(user, request.POST)
        if form.is_valid():
            pground_id = form.cleaned_data['pground']
            time_from = form.cleaned_data['time_from']
            time_to = form.cleaned_data['time_to']
            visit = Visit.objects.create(pground_id = pground_id, time_from=time_from, time_to=time_to, who=user)
            ctx = {'msg': 'Visit added!', 'user': user}
            return TemplateResponse(request, 'add_visit.html', ctx)
        else:
            ctx = {'form': form, 'user': user}
            return TemplateResponse(request, 'add_visit.html', ctx)

您会这么好心并评论我做错了什么以及如何在我的网站上获得datetimepicker？

Answer 1

在附加日期时间选择器时尝试使用 id 选择器而不是类选择器

即

$('#datetimepicker').datetimepicker()

示例：http://xdsoft.net/jqplugins/datetimepicker/