Datapicker in django data input

Question

I tried to implement this solution to create a form field with a data picker. The field appears, but it does not show a calendar. It is a regular input field. I don't know if I'm missing any include. Could you help please?

My forms.py:

class CreateProjectForm(forms.Form):
    project_expiration = forms.DateField(widget=forms.TextInput(attrs={'class':'datepicker'}))

    def __init__(self, *args, **kwargs):
        super(CreateProjectForm, self).__init__(*args, **kwargs)
        self.fields['project_expiration'].label = "Expiration Date:"

My template:

    {% for field in form %}

    <div class="form-group">
        <div class="col-sm-3">
            <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
        </div>

         <div class=" col-sm-9">
            {{field}}
        </div>
    </div>

    {{field.non_field_errors }}
    {{field.errors}}

    {% endfor %}

Update: Also in my template:

<script>
  $(function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:2012",
      });
  });
</script>

And my includes:

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

Where in templates are your javascript includes and script for initializing datepicker? — GwynBleidD, Sep 21 '16 at 11:51
@4140tm I added a script code. I'll update the question with it. — revy, Sep 21 '16 at 11:54
@GwynBleidD: Sorry, I forgot to add this in the question. I updated it with the datepicker initialization. — revy, Sep 21 '16 at 11:58
When you look at the source code of the page, does the field have the class `datepicker`? — 4140tm, Sep 21 '16 at 12:00
@revy but **where** in template that code is located? In ``? in the beginning of ``? at the end of ``? — GwynBleidD, Sep 21 '16 at 12:16
In the body, at the begining. In fact, it is the first thing inside the tag. — revy, Sep 21 '16 at 12:18

score 2 · Accepted Answer · answered Sep 21 '16 at 12:19

2

Be sure to place the inline javascript right before the closing </body> tag. It should be after the html it is supposed to effect and after the js files it relies on.

answered Sep 21 '16 at 12:19

4140tm

2,070
14
17

Well, that helped a lot. It happened it was not only the place where I've placed inline javascript. It was also the includes I was using. I checked https://jqueryui.com/datepicker/ and replaced the includes and then it all was solved. Thanks for the help. ;) – revy Sep 21 '16 at 12:45

score 1 · Answer 2 · answered Sep 21 '16 at 12:24

1

For datepicker initialization code to work, it must be either placed after HTML tag with datepicker class (recommended at the end of body tag) or it must be wrapped with:

$(document).ready(function() {
    // YOUR INITIALIZATION CODE HERE
});

So it will be executed when your input tag is already rendered by your browser and any javascript can be applied on it.

answered Sep 21 '16 at 12:24

GwynBleidD

20,081
5
46
77

1

No need to wrap it - `$()` is shorthand for `$( document ).ready()` - https://learn.jquery.com/using-jquery-core/document-ready/ – 4140tm Sep 21 '16 at 12:30

Datapicker in django data input

2 Answers2