在 Django Admin (jazzmin) 中使用 jQuery DateTimePicker 出现错误 - 输入值列表

编程问答 2022-11-17

问题描述

在 Django 管理中为 DateTimeField 插入 TempusDominus 小部件。任务是启用按月和年缩放的日期选择。标准小部件没有该选项。但是 Django 在使用 DateTimeField 时，期望返回两个值，一个是日期，一个是时间，但是小部件返回一个 value="2021-07-27 13:00:00"。保存或修复检查时如何拆分值？有一个日期和时间值保存到数据库中。感谢您的帮助。

模型.py

<table id="board">
        <tr>
            <td class="square">Start!</td>
            <td class="square">Text!</td>
            <td class="square">text?</td>
            <td class="square">text</td>
            <td class="square">cool text</td>
            <td class="square">text!!!</td>
        </tr>
        <tr>
            <td class="square">text</td> 
        </tr>
        <tr>
            <td class="square">text</td>
        </tr>
        <tr>
            <td class="square">text</td>
            <td class="square">text</td>
            <td class="square">text.</td>
            <td class="square">very cool text</td>
            <td class="square">text?</td>
            <td class="square">text!!!</td>
        </tr>
    </table>

小部件.py

start_date = models.DateTimeField(blank=True,null=True)
end_date = models.DateTimeField(blank=True,null=True)

小部件/datetimepicker.html

from django.forms import DateTimeInput


class DateTimePicker(DateTimeInput):
    template_name = 'widgets/datetimepicker.html'

    def get_context(self,name,value,attrs):
        datetimepicker_id = f'datetimepicker_{name}'
        if attrs is None: attrs = dict()
        attrs['data-target'] = f'#{datetimepicker_id}'
        attrs['class'] = 'form-control datetimepicker-input'
        context = super().get_context(name,attrs)
        context['widget']['datetimepicker_id'] = datetimepicker_id
        return context

    class Media:
        css = {
            "all": (
                "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css","//cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css",)
        }
        js = (
            '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js','//cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js',)

admin.py

<div class="input-group date" id="{{ widget.datetimepicker_id }}" data-target-input="nearest">
  {% include "django/forms/widgets/input.html" %}
  <div class="input-group-append" data-target="#{{ widget.datetimepicker_id }}" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>
<script>
  django.jQuery(document).ready(function ($) {
    $("#{{ widget.datetimepicker_id }}").datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss',});
  });
</script>

小部件

enter image description here

保存时出错

enter image description here

解决方法

你可以试试这个

在你的 froms.py

class DateTime(ModelForm):
    start_date = forms.DateTimeField(
        input_formats=['%Y-%m-%d %I:%M:%S %p'],widget=forms.DateTimeInput(format='%Y-%m-%d %I:%M:%S %p')
    )

   end_date = forms.DateTimeField(
        input_formats=['%Y-%m-%d %I:%M:%S %p'],widget=forms.DateTimeInput(format='%Y-%m-%d %I:%M:%S %p')
    )

    
    class Meta:  
     model = your model name
     fields = ['start_date','end_date',your others fields....]

然后在你的html中加载cdn链接

djangodjango-widget