How to add a datepicker to django forms

Question

Django doesn't support a datepicker for its forms, i didn't find any solution that works for me.

If anyone knows some simple solution for this, i'd be very thankful.

Thanks.

forms.py

    class meta:
        model = Student
        fields = ["classfk","name","birth_date"]

views.py

class CreateNewStudent(CreateView):
    fields = ("classfk","name", "birth_date")
    model = Student
    success_url = '/class/'
    template_name = "temp/newstudent.html"

newstudent.html

<html>
<body>
<head>

</head>

<form action="" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit"/>
</form>

</body>
</html>

Possible duplicate of [how to show datepicker calender on datefield](http://stackoverflow.com/questions/16356289/how-to-show-datepicker-calender-on-datefield) — Moinuddin Quadri, Nov 19 '16 at 13:37
PS: I do not know anything about Django forms, yet I was able to find that. It was the first link that appeared in Google search — Moinuddin Quadri, Nov 19 '16 at 13:39
What do you mean by didn't solve the problem? You would have got some error/ exception / unexpected behavior? I even do not know what you tried. Please mention all the necessary information along with the question. Only then someone from SO will be able to help you :) — Moinuddin Quadri, Nov 19 '16 at 17:14

Zagorodniy Olexiy · Accepted Answer · 2016-11-19T21:32:10.300

In case of your example, your form should look like that:

class DateForm(ModelForm):
  class Meta:
    model = Student
    fields = ["classfk","name","birth_date"]

your view.py:

class CreateNewStudent(CreateView):
  fields = ("classfk","name", "birth_date")
  model = Student
  success_url = '/class/'
  template_name = "temp/newstudent.html"

and your template:

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
                $(function() {
                        $( "#id_birth_date" ).datepicker({
                                dateFormat: "yy-mm-dd",
                                defaultDate: "+1w",
                                changeMonth: true,
                                numberOfMonths: 2,
                                onClose: function( selectedDate ) {
                                        $( "#id_birth_date" ).datepicker( "option", "minDate", selectedDate );
                                }
                        });
                });
        </script>

<head>
<body>
<form action="" method="post">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Save" />
</form>
</body>

You can customize datepicker according jQuery UI documentation http://api.jqueryui.com/datepicker/

My view is a class based view, class CreateNewStudent(CreateView):fields = ("classfk","name", "birth_date") model = Student success_url = '/class/' template_name = "temp/newstudent.html" How would it be ? thanks for your answer. — Goun2, Nov 19 '16 at 19:46

How to add a datepicker to django forms

1 Answers1