Undefined is not a function error

[s7h]

this is my forms.py

from bootstrap3_datetime.widgets import DateTimePicker  
from django import forms

class serviceForm(forms.ModelForm):

    serviceRequestDate = forms.DateTimeField(
        widget=DateTimePicker(options={"format": "YYYY-MM-DD",
                                       "pickTime": False}))

    class Meta:
        model = serviceBooking
        fields = ('serviceRequestDate', 'serviceRequestTime', 'serviceDetails')

this is my template;

<form method="post" action="/services/book/">{% csrf_token %}
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group required">
                                        <label for="InputName">Date <sup>*</sup> </label>
                                        {{form.serviceRequestDate}}
                                    </div>
                                    <div class="form-group required">
                                        <label for="InputLastName">Number of Hours <sup>*</sup> </label>
                                        {{form.serviceRequestTime}}
                                    </div>

                                </div>
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group required">
                                        <label for="InputZip">Tell us about your work? <sup>*</sup></label>
                                        {{form.serviceDetails}}
                                    </div>


                                </div>
</form>

I have included the {{form.media}} tag in my head but I'm getting undefined is not a function error in my console and the datepicker is not opening.

<script>
            $(function() {
                $("#id_serviceRequestDate_picker").datetimepicker({"pickTime": false, "language": "en-us", "format": "YYYY-MM-DD"});
            });
</script>

[n3storm]

Do you already have loaded jquery library in your page?
Are you getting any 404 errores in network pane in your browser?

[s7h]

Yes, I have loaded jquery in my head before including {{form.media}}
and I'm not getting any 404s

[tonjo]

Have you checked the generated html output?
Is id_serviceRequestDate_picker correct?
Given your field name, it should be id_serviceRequestDate.
From Django docs:

Its id, in turn, is generated by prepending 'id_' to the field name. 

[ghost]

I'm having the same problem... It looks like adding the app to the installed apps doesn't add the javascript files... form.media doesn't either. Or there is a problem with having head in base.html and extending base.html.

[tonjo]

Maybe I'm wrong, but simply check the real datepicker id.
I guess it's id_serviceRequestDate, not id_serviceRequestDate_picker.
Check it with Firebug or Chrome developer tools.

[ghost]

I figured out the issue. If you change the name of the form you send to the template genorator, say my_form instead of form, you have to use {{my_form.media}}. If you have more then one form with a datepicker it is safe to call {{my_form.media}}{{my_other_form.media}}; resources will not be included twice.

OP must be passing the form under a different name, e.g. service_form, in the return render, which means he's not loading the resources and the datetimepicker function call can't be found thus generating the error he is getting.

[ghost]

Developers you should make a note about this in the readme.

[ghost]

Perhaps write in an example view where you retrieve and pass the form to the return render and highlight that the name of your form in the view must be the name you use in the {{form.media}} tag.

[ghost]

Wait... Maybe I'm wrong about the problem. Either way that was my issues.