Search code examples
pythondjangodatetimepicker

Django widget DateTimePicker $ is not defined


I want to add a DateTimePicker widget into my modelform, but i have some problem with template, and it's doesn't work and don't show calendar. I think that it's a problem with the block and a content witch generated with widget. Maybe i can turnoff this function, or edit this part manually?

In console I have Error:

Uncaught ReferenceError: $ is not defined

Template script which was generated by widget (browser):

<p><label for="id_event_date">Event date:</label> 
   <div id="id_event_date" class="input-group date">
       <input class="form-control" id="id_event_date" name="event_date" type="text" value="2015-07-28 03:39:46" />
       <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
       <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
   </div>

   <script type="text/javascript">
       $("#id_event_date").datetimepicker({
           autoclose: true,
           language: 'ru',
           format: 'yyyy-mm-dd    hh:ii:ss'
       }).find('input').addClass("form-control");
   </script>

   <input id="initial-id_event_date" name="initial-event_date" type="hidden" value="2015-07-28 03:39:46" /></p>

Form.py

from django import forms
from .models import Event 
from datetimewidget.widgets import DateTimeWidget


class EventConstr(forms.ModelForm):
    class Meta:
        model = Event
        fields = ['title', 'event_date']

        widgets = {
            'event_date': DateTimeWidget(attrs={'class': "form-control"}, usel10n = True, bootstrap_version=3)
        }

And my template (code):

<form enctype="multipart/form-data" method="POST" role="form">
    {% csrf_token %}

    {{ form.as_p }}

    <button type="submit" class="save btn btn-default">Save</button>
</form>

If I can give you more information, ask me please!


Solution

  • $ is not defined means you've not loaded jQuery.

    So you'll need to load that in your base template or similar;

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>