django bootstrap 日期时间选择器

Question

我正在尝试使用 django bootstrap datepicker 小部件实现 datepicker，但 datepicker 未显示在网页上（“welcome.html”） 我已将表单传递给视图并在网页中调用表单 任何帮助将不胜感激

forms.py

class DateForm(forms.Form):
todo = forms.CharField(
    widget=forms.TextInput(attrs={"class":"form-control"}))
date_1=forms.DateField(widget=DatePicker(
    options={"format": "mm/dd/yyyy",
    "autoclose": True }))

def cleandate(self):
    c_date=self.cleaned_data['date_1']
    if c_date < datetime.date.today():
        raise ValidationError(_('date entered has passed'))
    elif c_date > datetime.date.today():
        return date_1
def itamdate(self):
    date_check=calendar.setfirstweekday(calendar.SUNDAY)
    if c_date:
        if date_1==date_check:
            pass
        elif date_1!=date_check:
            raise ValidationError('The Market will not hold today')
        for days in list(range(0,32)):
            for months in list(range(0,13)):
                for years in list(range(2005,2108)):
                    continue

views.py

def imarket(request):
    #CREATES A FORM INSTANCE AND POPULATES USING DATE ENTERED BY THE USER

    if request.method=='POST':
        form = DateForm(request.POST or None)
    #checks validity of the form
        if form.is_valid():
            itamdate=form.cleaned_data['date_1']
            return HttpResponseRedirect(reverse('welcome.html'))
    return render(request, 'welcome.html', {'form':form})

welcome.html

 {%  extends 'base.html' %}
{% load bootstrap %}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
{% block content  %}
<title>welcome</title>

    <form action = "{% url "imarket"}" method = "POST" role="form">
        {% csrf_token %}
        <table>
            {{form|bootstrap_horizontal}}
        </table>
        <div class = "form-group">
            <input type ="submit" value= "CHECK" class="form control"/>
        </div>
    </form>

{% endblock %}

Answer 1

引导日期选择器不工作，所以我将 jquery 日期选择器直接添加到我的表单中。 py 使用这个answer 我更新的 forms.py

class DateForm(forms.Form):
todo = forms.CharField(
    widget=forms.TextInput(attrs={"class":"form-control"}))
date_1=forms.DateField(widget=forms.DateInput(attrs={'class':'datepicker'}))

我更新的welcome.html

{%  extends 'base.html' %}
{% load bootstrap %}


{% block content  %}
<title>welcome</title>

    <form action = "{% url "imarket"}" method = "POST" role="form">
        {% csrf_token %}
        <table>
            {{form|bootstrap}}
            <script>
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>
        </table>
        <div class = "form-group">
            <input type ="submit" value= "CHECK" class="form control"/>
        </div>
    </form>

{% endblock %}

Answer 2

datepicker 应该在 html 页面中初始化。

Answer 3

如果您正在使用引导程序，请从Datetimepicker for Bootstrap 4 下载日期选择器

那么 在头部包括

1. 字体真棒css
2. boostrap4 css
3. bootstrap-datetimepicker.min.css

在正文部分包括

1. moment.min.js
2. bootstrap.min.js
3. bootstrap-datetimepicker.min.js

定义你的表单

from django import forms

class DateRangeForm(forms.Form):
    start_date = forms.DateTimeField(required=True)
    end_date = forms.DateTimeField(required=True)

在模板中渲染表单

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ dt_range_form }}
    <input class="btn btn-primary btn-sm" type="submit" value="Refresh">
</form>

在脚本部分添加

$("#id_start_date").datetimepicker();

这里有你的日期时间选择器！对我来说，时间图标仍然没有出现！需要调试一下。