DateTimeField use calendar input instead of text

Question

I have a DateTimeField that users have to manually type the date and time (YYYY-MM-DD Hour:Minute am/pm) in. I want to be able to use the Django calendar input for users to select a date on that, instead of having to type it in. I believe this can be done through the DateTime form field type, but am not certain. I would greatly appreciate any help with this issue.

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')

Sanip · Answer 1 · 2019-02-21T06:09:16.040

0

You need to use jQuery to enable datetime picker so that you don't have to manually insert the input. A simple example can be found in http://jqueryui.com/datepicker/

or you can use other examples like django-floppyforms

If you don't wan't to use jQuery then you can use the datetime picker used in django admin in your forms. django-admin datetime picker use in form for reference.

edited Feb 21 '19 at 06:09

answered Feb 21 '19 at 05:05

Sanip

1,772
1
14
29

That doesn't answer my question as I require datetimepicker. Also, I was asking for the django one such as type = datetime-local, however that one does not work with my model – Feb 21 '19 at 05:48
For date time picker I have also used xdsoft datetime picker. Here is the link to the docs. [https://xdsoft.net/jqplugins/datetimepicker/] – Sanip Feb 21 '19 at 05:57

score 0 · Answer 2 · answered Feb 21 '19 at 06:46

This would be helpful if you want to use Jquery to solve this.

According to the docs, the widget DateTimeInput produces a text field with type = "text", Ref : https://docs.djangoproject.com/en/2.1/ref/forms/widgets/#dateinput

You can try jquery datepicker class this way:

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')

Now in your template:

<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>

Note : Don't forget to include jquery library in your template.

DateTimeField use calendar input instead of text

2 Answers2