1

I know there is a very similar issue datepicker, but I have not been able to solve it myself, since I consider my problem it's different. So I am trying to use bootstrap-datepicker bootstrap-datepicker in my local django project. I have a little experience using django, currently using version 1.4. I have a ModelForm which i want to be able to use a datepicker interface for some DateField. I render the form field correctly in the template using:

 <div class="well">
   <input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
 </div>

And at the bottom of my template I have the following JS code:

<script> $("#datepicker").datepicker(); </script>

Now, in my base layout template I have the following:

<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.css"/>
<link rel="stylesheet" href="{{ STATIC_URL }}css/datepicker.css"/>

{% block head %}{% endblock %}
{% include "layouts/header.html" %}
{% block content %}{% endblock %}
{% include "layouts/footer.html" %}

<script src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap-datepicker.js"></script>
{% block scripts %}{% endblock %} 

The template where I want to render the datepicker of course includes the base layout template:

{% extends "layouts/base.html" %}

My static files are distributed the following way:

Project/
    apps/
    static/
        css/
            bootstrap.css
            datepicker.css
            datepicker.less
        js/
            bootstrap.js
            bootstrap-datepicker.js

I have never used JS before in my project so it might have something to do, but still, when I render my form the DateField shows ok as the datepicker example its just I can't make it deploy the widget where you get to choose the date from the calendar. Everytime I reload the url with the form I get the following in runserver:

[22/Oct/2012] "GET /element/new HTTP/1.1" 200 9547
[22/Oct/2012] "GET /static/js/bootstrap.js HTTP/1.1" 304 0
[22/Oct/2012] "GET /static/css/datepicker.css HTTP/1.1" 304 0
[22/Oct/2012] "GET /static/js/bootstrap-datepicker.js HTTP/1.1" 304 0
[22/Oct/2012] "GET /static/css/bootstrap.css HTTP/1.1" 200 118150

I would appreciate a lot any kind of help. If you need my settings.py is in the following link: settings.py

Thank you very much.

1 Answer 1

2

For clarity. The datepicker in question is http://www.eyecon.ro/bootstrap-datepicker/

I have implemented this datepicker in my own project but only as part of a more complex JS usage. My call was something closer to:

$("#datepicker").datepicker({
    format: 'yyyy-mm-dd',
    weekStart: 1,
 });

I see no mention of a jQuery JS file which is required for the $() to work.

The runserver messages are completely normal. They are the HTTP calls that are received along with how they worked out, 200 and 304 means the files where found or did not need to be fetched again. So that is fine. Again, I don't see your browser requesting jQuery so I think it might be missing.

To troubleshoot you should rather look for errors in your Javascript Console (in the browser) than in runserver.

Hope that helps.

3
  • I was thinking it had something to do with JQuery, I have not included it since I never used JQuery before, didn't think it was necessary, how to append it to project ? Oct 22, 2012 at 21:14
  • jquery.com Check that site. Download it, add it to a script-tag, just like your other .js-files. You can read up on how it works on that site. But your above sample should work once you have jQuery in there. It should probably be before bootstrap.js in your HTML. Oct 23, 2012 at 7:13
  • YEP, that worked for me, jquery was what I was missing. Thanks Oct 23, 2012 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.