我有一个DateTimeField
,用户必须手动输入日期和时间(YYYY-MM-DD小时:分钟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')
答案 0 :(得分:0)
您需要使用jQuery启用日期时间选择器,以便不必手动插入输入。可以在http://jqueryui.com/datepicker/
中找到一个简单的示例或者您可以使用其他示例,例如django-floppyforms
如果您不想使用jQuery,则可以在表单中使用django admin中使用的日期时间选择器。 django-admin datetime picker use in form供参考。
答案 1 :(得分:0)
如果您想使用Jquery解决此问题,这将很有帮助。
根据文档,小部件DateTimeInput
产生一个文本字段,类型为=“ 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库。