Grid date column js error

Question

I added a date type column in a custom grid.

$this->addColumn('some_date', array(
    'header'=> Mage::helper('helper_alias')->__('Some Date'),
    'index' => 'some_date',
    'type'=> 'date',
));

Now, when I try to filter my grid by that value and click on the calendar icon I get a js error.

TypeError: $(...) is null

The line that is causing this is

var index = $("widget-chooser").getStyle("zIndex");

because $("widget-chooser") is null.

If I change the column type to datetime the error does not appear. (but I don't want datetime I want date).

The problem reproduces in the core grids (Shopping cart promo rules for example).

Is there anyway to avoid this?

Answer 1

I can replicate this on a vanilla 1.7 install. I wonder how this got unnoticed.

Anyway, the problem is in Mage_Adminhtml_Block_Widget_Grid_Column_Filter_Date::getHtml(). At the end of the JS string, additional callbacks are bound to the click event. Removing those (via anything-except-directly-from-core; you know the drill) fixes your problem. I'm talking about these lines >>here<<.

Two reasons why I think that's erroneous legacy code:

• the "widget-chooser" ID is dinamically created with WysiwygWidget.chooser.openDialogWindow in js/mage/adminhtml/wysiwyg/widget.js (code here), and this openDialogWindow is used in other places than the date picker (I don't know exactly which are those, but it's related to Mage_Widget_Block_Adminhtml_Widget_Chooser)
• Mage_Adminhtml_Block_Widget_Grid_Column_Filter_Datetime doesn't have those extra callbacks, and this class is the direct child of Mage_Adminhtml_Block_Widget_Grid_Column_Filter_Date.

Of course, I may be wrong.

Answer 2

After a deep investigation, the results are in.
This is definitely a bug.
The code in question

var index = $("widget-chooser").getStyle("zIndex");

Was added in 1.4, to fix a bug. Apparently, when you had a date element in a widget configuration screen, the calendar was appearing below the element with the widget configuration and you couldn't select a date.

The code is there in order to set a z-index to the calendar element bigger than the z-index of the widget element.

I tried to avoid class rewrites, so here is my stupid fix to the issue:
I created a custom layout handle in one of the admin layout files.

<fix_calendar_js_issue>
    <reference name="content">
        <block type="core/text" name="dummy-widget-chooser" as="dummy-widget-chooser">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript">
                    Event.observe(window, 'load', function() {
                        if (!$('widget-chooser')) {
                            $$('body')[0].insert('<div id="widget-chooser"></div>');
                        }
                });
                </script>]]></text>
            </action>
        </block>
    </reference>
</fix_calendar_js_issue>

This just ads a div with id widget-chooser if one does not exist in the DOM.

Now all I have to do is to include this handle in the pages that show this error. For example the shopping cart price rules.

<adminhtml_promo_quote_index>
    <update handle="fix_calendar_js_issue" />
</adminhtml_promo_quote_index>

All of these can be done from a single custom layout file.