How can i add datepicker to forms Django

Question

how can i add datepicker to my form, this is my form.

  <form action="." method="POST">
            {% csrf_token %}
            <div class="row">
                {% for field in form %}
                    <div class="form-group col-md-6" >
                        {{ field.errors }}
                        <label for="{{ field.id_for_label }}">
                            {{ field.label }}
                        </label>
                        {{ field |add_class:'form-control '}}
                    </div>
                {% endfor %}

And this is my code for datepicker, first the script and then the HTML

<script>
 $(document).ready(function(){
                $('#data_1 .input-group.date').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
        });
</script>

HTML

<div class="form-group" id="data_1">
                                <label class="font-noraml">Simple data input format</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2014">
                                </div>
                            </div>

score 0 · Accepted Answer · answered Oct 15 '20 at 01:44

the issue doesn't occur because of Django but it turns out that there are several tags that missing in the HTML specific to the script tag.

so, you can try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="." method="POST">
            {% csrf_token %}
            <div class="row">
                {% for field in form %}
                    <div class="form-group col-md-6" >
                        {{ field.errors }}
                        <label for="{{ field.id_for_label }}">
                            {{ field.label }}
                        </label>
                        {{ field }}
                    </div>
                {% endfor %}
            </div>
    </form>
    <div class="form-group" id="data_1">
        <label class="font-noraml">Simple data input format</label>
        <div class="input-group date">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2014">
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script>
     $(document).ready(function() {
                    $('#data_1 .input-group.date').datepicker({
                    todayBtn: "linked",
                    keyboardNavigation: false,
                    forceParse: false,
                    calendarWeeks: true,
                    autoclose: true
                });
            });
    </script>
</body>
</html>

also, you can read more about this issue here: jQuery UI " $("#datepicker").datepicker is not a function"

How can i add datepicker to forms Django

1 Answers1