[Fixed]-How to use jQuery UI Datepicker as a Django Widget?

by

11👍

JQueryUI has a very good date UI picker.
You can get it here: http://jqueryui.com

Say for example you have the following form:

class DateForm(forms.Form):
   myDate = forms.DateField()

From here you want to bind the JQuery date widget to your field from within your template.

I am assuming here you are passing the DateForm to your template and your path(s) to JQuery are correct. 

<head>
    <link rel="stylesheet" href="/themes/base/jquery.ui.all.css">
    <script src="/jquery.js"></script>
    <script src="/ui/jquery.ui.core.js"></script>
    <script src="/ui/jquery.ui.widget.js"></script>
    <script src="/ui/jquery.ui.datepicker.js"></script>
    <script>
    $(function() {
        $( "#id_myDate" ).datepicker();
    });
    </script>
</head>
<body>

<p>Date: <input type="text" id="id_myDate"></p>

</body>

Please note that myDate is preceded by id_. Django does this transparently so make sure you match it as such: id_myDate.

Hope this helps you.

👤Dave

0👍

You should look on DateInput – you’ll need to inherit your widget from it. Also look on admin widgets – there are some JS appended. So take DateInput, add some JS and you’re done.

👤ilvar

Leave a comment