DateTimeField 使用日历输入而不是文本答案

【问题标题】：DateTimeField use calendar input instead of textDateTimeField 使用日历输入而不是文本
【发布时间】：2019-02-21 04:27:05
【问题描述】：

我有一个DateTimeField，用户必须手动输入日期和时间 (YYYY-MM-DD Hour:Minute am/pm)。我希望能够使用 Django 日历输入让用户选择一个日期，而不必输入。我相信这可以通过DateTime 表单字段类型来完成，但不确定。对于这个问题，我将不胜感激。

forms.py

class LessonForm(forms.ModelForm):
    lesson_instrument = forms.ChoiceField(choices=instrument_list, widget=forms.Select(attrs={'class' : 'form-control', 'required' : 'True'}))
    lesson_level1 = forms.ChoiceField(choices=level_list, widget=forms.Select(attrs={'class' : 'form-control', 'required' : 'True'}))
    lesson_level2 = forms.ChoiceField(choices=level_list, required=False, widget=forms.Select(attrs={'class' : 'form-control'}))
    lesson_level3 = forms.ChoiceField(choices=level_list, required=False, widget=forms.Select(attrs={'class' : 'form-control'}))
    lesson_length = forms.ChoiceField(choices=length_list, widget=forms.Select(attrs={'class' : 'form-control', 'required' : 'True'}))
    lesson_datetime_start = forms.DateTimeField(input_formats=['%Y-%m-%d %I:%M %p'], widget=forms.DateTimeInput(attrs={'class': 'form-control', 'placeholder':'YYYY-MM-DD Hour:Minute am/pm'}))
    lesson_datetime_end = forms.DateTimeField(input_formats=['%Y-%m-%d %I:%M %p'], required=False, widget=forms.DateTimeInput(attrs={'class': 'form-control', 'placeholder':'YYYY-MM-DD Hour:Minute am/pm'}))
    lesson_weekly = forms.BooleanField(required=False)

    class Meta:
        model = Lesson
        fields = ('lesson_instrument', 'lesson_level1', 'lesson_level2', 'lesson_level3', 'lesson_length', 'lesson_datetime_start', 'lesson_datetime_end', 'lesson_weekly')

【问题讨论】：

标签： python django calendar

【解决方案1】：

您需要使用 jQuery 来启用日期时间选择器，这样您就不必手动插入输入。一个简单的例子可以在http://jqueryui.com/datepicker/中找到

或者您可以使用其他示例，例如 django-floppyforms

如果您不想使用 jQuery，那么您可以在表单中使用 django admin 中使用的日期时间选择器。 django-admin datetime picker use in form供参考。

【讨论】：

这不能回答我的问题，因为我需要 datetimepicker。另外，我要的是 django 之一，例如 type = datetime-local，但是那个不适用于我的模型
对于日期时间选择器，我还使用了 xdsoft 日期时间选择器。这是文档的链接。 [xdsoft.net/jqplugins/datetimepicker/]

【解决方案2】：

如果您想使用 Jquery 来解决这个问题，这将很有帮助。

根据文档，小部件 DateTimeInput 生成一个 type = "text" 的文本字段，参考：https://docs.djangoproject.com/en/2.1/ref/forms/widgets/#dateinput

您可以通过这种方式尝试 jquery datepicker 类：

class LessonForm(forms.ModelForm):
    lesson_instrument = forms.ChoiceField(choices=instrument_list, widget=forms.Select(attrs={'class' : 'form-control', 'required' : 'True'}))
    lesson_level1 = forms.ChoiceField(choices=level_list, widget=forms.Select(attrs={'class' : 'form-control', 'required' : 'True'}))
    lesson_level2 = forms.ChoiceField(choices=level_list, required=False, widget=forms.Select(attrs={'class' : 'form-control'}))
    lesson_level3 = forms.ChoiceField(choices=level_list, required=False, widget=forms.Select(attrs={'class' : 'form-control'}))
    lesson_length = forms.ChoiceField(choices=length_list, widget=forms.Select(attrs={'class' : 'form-control', 'required' : 'True'}))
    lesson_datetime_start = forms.DateTimeField(input_formats=['%Y-%m-%d %I:%M %p'], widget=forms.DateInput(attrs={'class':'datepicker-start'}))
    lesson_datetime_end = forms.DateTimeField(input_formats=['%Y-%m-%d %I:%M %p'], required=False, widget=forms.DateInput(attrs={'class':'datepicker-end'}))
    lesson_weekly = forms.BooleanField(required=False)

    class Meta:
        model = Lesson
        fields = ('lesson_instrument', 'lesson_level1', 'lesson_level2', 'lesson_level3', 'lesson_length', 'lesson_datetime_start', 'lesson_datetime_end', 'lesson_weekly')

现在在您的模板中：

<script>
  $(function() {
    $(".datepicker-start" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:2012",
      // more options can also be included

    });
$(".datepicker-end" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:2012",

    });
  });
</script>

注意：不要忘记在模板中包含 jquery 库。

【讨论】：