如何将日期/日历小部件添加到 django 表单？

Posted 2023-02-24

【中文标题】如何将日期/日历小部件添加到 django 表单？

【英文标题】：How can i add a date/calender widget to django forms?

【发布时间】：2019-11-27 11:22:18

【问题描述】：

我尝试关注这些links 和this，但没有成功。小部件未加载到表单中，并且 js 文件在控制台中给出 404 错误，而它可以从链接访问。我使用清晰的表单来呈现我的表单。

forms.py

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

    # patient Form
    class PatientForm(ModelForm):

        birth_date = forms.DateField(label='Birth Date',widget=DateInput())
        class Meta:
            model = Patient
            exclude = ['user',]

模板

           <h2>Add Patient</h2>
            <form method="POST" action="% url 'patients:patient_create' %">

                % csrf_token %
                  form|crispy 
                <button type="submit" class="btn btn-primary" >Add Patients</button>
                <p></p>
            </form>
</div>
    % endblock %

    <script>
    $(document).ready(function() 
        $('.datepicker').datepicker();
    );
    </script>

js文件+CSS的链接

<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

控制台中的错误

Not Found: /patients/”https://code.jquery.com/jquery-1.12.4.js”
Not Found: /patients/”https://code.jquery.com/ui/1.12.1/jquery-ui.js”
[18/Jul/2019 15:29:09] "GET /patients/%E2%80%9Dhttps://code.jquery.com/jquery-1.12.4.js%E2%80%9D HTTP/1.1" 404 6742
[18/Jul/2019 15:29:09] "GET /patients/%E2%80%9Dhttps://code.jquery.com/ui/1.12.1/jquery-ui.js%E2%80%9D HTTP/1.1" 404 6760
Not Found: /patients/”https://code.jquery.com/jquery-1.12.4.js”
[18/Jul/2019 15:29:10] "GET /patients/%E2%80%9Dhttps://code.jquery.com/jquery-1.12.4.js%E2%80%9D HTTP/1.1" 404 6742
Not Found: /patients/”https://code.jquery.com/ui/1.12.1/jquery-ui.js”
[18/Jul/2019 15:29:10] "GET /patients/%E2%80%9Dhttps://code.jquery.com/ui/1.12.1/jquery-ui.js%E2%80%9D HTTP/1.1" 404 6760
Not Found: /favicon.ico

在我的代码中，我有很多 jquery 版本会导致问题。我想要一个比 jquery ui 更用户友好的小部件，所以有没有其他方法可以用来添加与 jquery ui 相同的小部件？

【参考方案1】：

在您的 forms.py 中：

class DateInput(forms.DateInput):
     input_type = 'date'

class PatientForm(ModelForm):


        class Meta:
            model = Patient
            exclude = ['user',]
            widgets = 
                'birth_date':DateInput,
               

试试这个

【讨论】：

现在我得到这个错误 'functools.partial' 对象没有属性 'is_hidden'

你删除了这行DateInput = partial(forms.DateInput, 'class': 'datepicker')如果没有尝试删除它

那么我如何在课堂上引用DateInput？

@AMMARRADY 我没听懂你想说什么

DateInput 定义在您要我删除的行中。

【参考方案2】：

问题是现代浏览器不会显示选择日期而不将type 设置为date

这就是为我解决它的方法

DateInput = partial(forms.DateInput, 'class': 'datepicker','type': 'date')
# patient Form
class PatientForm(ModelForm):

    birth_date = forms.DateField(label='Birth Date',widget=DateInput())
    class Meta:
        model = Patient
        exclude = ['user',]