如何在 django 中使用 Datepicker

Posted 2023-02-24

【中文标题】如何在 django 中使用 Datepicker

【英文标题】：How to use Datepicker in django

【发布时间】：2014-01-09 02:42:31

【问题描述】：

我想用 datepicker 实现一个 django 表单。我制作了我的 forms.py

from django import forms

class DateRangeForm(forms.Form):
    start_date = forms.DateField(widget=forms.TextInput(attrs=
                                
                                    'class':'datepicker'
                                ))
    end_date = forms.DateField(widget=forms.TextInput(attrs=
                                
                                    'class':'datepicker'
                                )) 

和 views.py

if request.method == "POST":
        f = DateRangeForm(request.POST)
        if f.is_valid():
            c = f.save(commit = False)
            c.end_date = timezone.now()
            c.save()
    else:
        f = DateRangeForm()
        args = 
        args.update(csrf(request))
        args['form'] = f


    return render(request, 'trial_balance.html', 
        'form': f
    )

balance.html

<div>
    <form action="" method="POST"> % csrf_token %
    Start Date: form.start_date &nbsp;&nbsp; End Date: form.end_date <br/>
    <input  type = "submit" name = "submit" value = "See Results">
    </form>

</div>

我的那个表单的输入框中仍然没有日期选择器。 我还尝试在脚本中包含我的文件链接，就像在我的 balance.html 中一样

<script src=" STATIC_URL js/jquery-1.3.2.min.js"></script>

日期选择器仍然无法正常工作。但是当在我的 html 文件中包含 jquery 时，我在 html 文件中实现的 jquery-treetable 也无法工作。

如何使日期选择器工作？

【问题讨论】：

小部件只会在管理表单上为您提供日期选择器。如果您希望在页面上有日期选择器，您需要为该表单激活 javascript 日期选择器。

【参考方案1】：

您可以使用forms.DateInput() 小部件，而不是forms.TextInput()：

from functools import partial
DateInput = partial(forms.DateInput, 'class': 'datepicker')

class DateRangeForm(forms.Form):
    start_date = forms.DateField(widget=DateInput())
    end_date = forms.DateField(widget=DateInput())

要使JQuery Datepicker 工作，您必须对其进行初始化：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function() 
    $('.datepicker').datepicker();
);
</script>

【讨论】：

谢谢，这非常简单。您可能希望包含指向 Datepicker css 的链接：<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

我花了将近一个小时寻找不同的解决方案，这是迄今为止最好的+简单+容易的解决方案。谢谢@niekas！

jquery的代码在模板的html中必须调用的字段.js中？你必须用哪种方式称呼它？ （我是 django 新手，不太懂……）

@niekas 如果我有 ModelForm 怎么样？这是否会改变使用此解决方案的情况？

@tilaprimera 不，它没有。唯一的区别是在哪里指定小部件。例如。在 ModelForm 中，您必须使用 class Meta: widgets = 'my_date': DateInput(),。

【参考方案2】：

下面的例子使用了 Django 的 generic.CreateView：

models.py 文件

class Task(models.Model):
    task_due_date = models.DateField()

views.py 文件

from bootstrap_datepicker_plus import DatePickerInput

class add_task(LoginRequiredMixin,generic.CreateView):
    model = Task
    fields = '__all__'
    def get_form(self):
        form = super().get_form()
        form.fields['task_due_date'].widget = DatePickerInput()
        return form
    template_name = 'team/add_task.html'

templates/add_task.html

% extends 'base.html' %
% load bootstrap4 %

% block body %

% bootstrap_javascript jquery='full' %
 form.media 

<h1>Add a Task</h1>
<br>
<div class="container">
  <div class="row">
    <form method="POST" action="% url 'team:add_task' %" id="taskForm">
        % csrf_token %
        % bootstrap_form form %
        % buttons %
            <button type="submit" class="btn btn-primary btn-large">Add</button>
        % endbuttons %
    </form>
  </div>
</div>

% endblock %

最终结果是：

Show end result