How to use jQuery UI Datepicker as a Django Widget?

前端 未结 2 1445
花落未央
花落未央 2021-02-07 15:02

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 co

相关标签:
2条回答
  • 2021-02-07 15:27

    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.

    0 讨论(0)
  • 2021-02-07 15:41

    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.

    0 讨论(0)
提交回复
热议问题