How to properly set up datepicker attached to a button

Question

I am currently working on a Django project using Grappelli and I am trying to create a page that mimics a standard change form. The page is not based on any model, so I am simply adding in all the fields myself. However, I am having trouble using the datepicker. Whenever I click the button that is supposed to show the calendar, nothing happens. I am sure I am simply not including something important.

Here is my current code:

{% extends "admin/change_form.html" %}

{% block javascripts %}
{{ block.super }}
{% endblock %}

{% block content %}

    <div id="grp-content-container">
        <form enctype="multipart/form-data" action method="post">
            {% csrf_token %}
            <div>
                <fieldset class="module grp-module">
                    <div class="form-row grp-row grp-cells-1 dob">
                        <div class="field-box l-2c-fluid l-d-4">
                            <div class="c-1">
                                <label class="required" for="dob">Birthday</label>
                            </div>
                            <div class="c-2">
                                <p class="datetime">
                                    <input class="vDateField hasDatepicker" type="text" id="dob" name="dob">
                                    <button id="dob-button" type="button" class="ui-datepicker-trigger"></button>
                                </p>
                            </div>
                        </div>
                    </div>
               </fieldset>
            </div>
        </form>
    </div>
{% endblock %}

In the javascripts block, I had attempted to add in the datepicker source functionality as taken from this website http://jqueryui.com/datepicker/, but that did not seem to have any effect. Any suggestions?

Answer 1

I've done it before couple of times and want to tell that with grappelli it works almost out of the box.

The point of interest:

grappelli.js with this lines:

var dateFields = $("input[class*='vDateField']:not([id*='__prefix__'])");
dateFields.datepicker(options);

And grappelli.reinitDateTimeFields function which reinits this.

So basically all you have to do is to put vDateField or/and vTimeField class to your input field and make sure that grappelli.js loaded properly and grappelli.initDateAndTimePicker() being called when document is ready. Then buttons with datepicker should load themselves automatically.

You can be sure that grappelli.initDateAndTimePicker() being called as any other JS-file: just put debugger; somewhere in initDateAndTimePicker constructor in grappelli.js and then it must pause in your js-inspector.

Hope that'll help, it works for me.