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?

valignatev · Accepted Answer · 2016-07-26T02:42:04.827

0

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.

edited Jul 26 '16 at 02:42

answered Jul 25 '16 at 18:28

valignatev

6,020
8
37
61

Hey, thanks for the response. If you check out the code, I do have vDateField in my desired input and the calendar shows up as a button. The issue is when I click the calendar, nothing happens. Do you have any idea why this is? – Written Jul 25 '16 at 18:41
I think that your custom added button can conflict with auto added one. Also check if `DateTimeShortcuts.dismissCalendar` was called and closes your calendar before you can see it. And also do you have an errors in your inspector? – valignatev Jul 25 '16 at 18:49
Nope, no errors just no response. When I comment out the button, the calendar button disappears, it should appear automatically? – Written Jul 25 '16 at 18:53
Be sure that grappelli.js is loaded and grappelli.initDateAndTimePicker() being called on document.ready. I've also updated my answer. – valignatev Jul 25 '16 at 19:07
grapellii.js is loading, but how would I make sure grappelli.initDateAndTimePicker() is being called on document.ready – Written Jul 25 '16 at 19:58
As any other JS-file: just put `debugger;` somewhere in `initDateAndTimePicker` constructor in grappelli.js and then it must pause in your js-inspector. I'll put that in answer. – valignatev Jul 26 '16 at 02:40
Thank you, I have no idea what I did wrong, but with your debugging help somehow it fixed itself! This is good advice for anyone having a similar issue – Written Jul 26 '16 at 13:25

How to properly set up datepicker attached to a button

1 Answers1