Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jQuery UI Datepicker as a Django Widget?

Some of my Django 1.3 models have DateField properties. When a form is generated, I'd like to use the jQuery UI Datepicker instead of a plain text field. I understand that I could create new widgets but I don't understand how. In addition, I am not sure if anything like this has already been done for Django (I googled it, no chance).

How to create a Django Widget that I can reuse across multiple models (and page) for the jQuery UI Datepicker?

like image 879
Martin Avatar asked Mar 07 '12 00:03

Martin


People also ask

How can change date format in jQuery ui datepicker?

An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field.


1 Answers

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.

like image 166
Dave Avatar answered Nov 07 '22 09:11

Dave