错误“输入值列表”是什么？意思？ （在Django管理表单中使用jQuery datetimepicker）

Question

编辑：似乎在django中使用DateTimeField时，它需要两个输入，一个带有日期，另一个带有这样的时间：

因此，我将仅创建两个字段，一个用于时间，一个用于日期，如果它按预期工作，则会发布答案。

---

我创建了一个自定义窗口小部件，以替换管理站点中默认的Django日期时间选择器。

为此，我遵循了这些instructions 但是当我单击“保存”按钮时，结果如下：

日志中没有其他特定错误。

有关更多详细信息，请参见以下代码：

settings.py：

DATE_INPUT_FORMATS = ['%d/%m/%Y %H:%M']

app / templates / widgets / xdsoft_datetimepicker.html

{% include "django/forms/widgets/input.html" %}
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- XDSoft DateTimePicker -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>


<script>
  $(function () {
    $("input[name='{{ widget.name }}']").datetimepicker({
      format: 'd/m/Y H:i',
    });
  });
</script>

app / models.py：

class DatesAndDates(models.Model):
    date_time_1 = models.DateTimeField()

app / forms.py：

class DateForm(forms.ModelForm):
    class Meta:
        model = DatesAndDates
        widgets = {
            "date_time_1": XDSoftDateTimePickerInput(
            )
        }
        fields=["date_time_1"]

最后是app / admin.py：

@admin.register(DatesAndDates)
class DatesAndDatesAdmin(admin.ModelAdmin):
    form = DateForm
    list_display = ["date_time_1"]

在尝试此操作之前，我只是使用Charfield作为日期和时间，并通过覆盖change_form.html模板添加了jQuery脚本，但我未能将datetime字符串转换为有效的datetime类型。

感谢阅读和帮助。

Answer 1

正如我在编辑中所说： 当我们使用models.DateTimeField时，Dango期望来自两个表单域的数据，一个为日期，一个为时间。因此，正如我所说，我在模型中创建了两个字段，一个models.DateField和一个models.TimeField。这是我用来在应用程序中创建自己的Widget的方法：

app / widget.py：

from django.forms import DateInput, TimeInput

# Overriding DateInput and TimeInput's template with my own one
class XDSoftDatePickerInput(DateInput):
    template_name = 'widgets/xdsoft_datetimepicker.html'

class XDSoftTimePickerInput(TimeInput):
    template_name = 'widgets/xdsoft_datetimepicker.html'

app / templates / widgets / xdsoft_datetimepicker.html

{% include "django/forms/widgets/input.html" %}
<!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- XDSoft DateTimePicker -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>


<script>
  $.datetimepicker.setLocale('fr');

  widget_name = '{{ widget.name }}'
  if (~widget_name.indexOf("date")){
    $(function () {
      $("input[name='{{ widget.name }}']").datetimepicker({
        format: 'd/m/Y',
          timepicker:false,
      });
    });
  }
  else{
    $(function () {
      $("input[name='{{ widget.name }}']").datetimepicker({
        format: 'H:i',
        datepicker:false,
      });
    });
  }
</script>

app / models.py：

class Event(models.Model):
    date_begin = models.DateField(verbose_name="Date début de l'évènement")
    hour_begin = models.TimeField(verbose_name="Heure début de l'évènement")
    date_end = models.DateField(blank=True, null=True, verbose_name="Date de fin de l'évènement")
    hour_end = models.TimeField(blank=True, null=True, verbose_name="Heure de Fin de l'évènement")

app / forms.py：

class EventForm(forms.ModelForm):
    class Meta:
        model = Event
        widgets = {
            "date_begin": XDSoftDatePickerInput(
            ),
            "date_end": XDSoftDatePickerInput(
            ),
            "hour_begin": XDSoftTimePickerInput(
            ),
            "hour_end": XDSoftTimePickerInput(
            )
        }
        fields='__all__'

还有，瞧！

但是这里有一个问题： 每次您使用小部件时，所有jquery脚本都将包含在您的页面中...

Answer 2

为了避免多个 css/js 加载，您可以像这样在小部件类中传递媒体：

class XDSoftDatePickerInput(DateInput):
    ...

    class Media:
        css = {
            "all": (
                'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css',
            )
        }
        js = (
            "https://code.jquery.com/jquery-3.4.1.min.js",
            'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js',
        )