Home/ Questions/Q 7022227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T23:33:16+00:00

There is a textbox that requires a date but has no date picker. I

  • 0

There is a textbox that requires a date but has no date picker. I would like to add one with Greasemonkey. I looked for an example but could not find one.

Is this possible? Is there an example for doing this? It doesn’t need to be fancy.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I like to use jQuery UI’s datepicker() because I usually have jQuery UI loaded anyway, and it’s fairly well-known/supported.

    Unfortunately, the datepicker functionality uses some criminally-bad event code, which requires a little fudging to work in a sandboxed environment.

    Still, its not too difficult. Here is a complete Greasemonkey script:

    // ==UserScript==
// @name        _Datepicker fun
// @include     http://YOUR_SERVER/YOUR_PATH/*
// @include     http://jsbin.com/ukelij*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// @require     https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
// @resource    jqUI_CSS  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
// ==/UserScript==

//--- Date picker needs additional CSS
GM_addStyle (GM_getResourceText ("jqUI_CSS") );

//--- Add datepicker popups to select inputs:
$("#pickMe").datepicker ();
$("#pickMe").click ( function () {
    setTimeout (cleanUpCrappyEventHandling, 100);
} );

/*--- Clean up ultra-crappy event handling ('til dev team eventually fixes).
    This must be done to allow the picker to work in a sandboxed environment.
    Alternately, you can modify the jQuery-UI source ala http://stackoverflow.com/q/2855403
*/
function cleanUpCrappyEventHandling () {
    var nodesWithBadEvents  = $(
        "div.ui-datepicker td[onclick^='DP'], div.ui-datepicker a[onclick^='DP']"
    );
    nodesWithBadEvents.each ( function () {
        var jThis       = $(this);
        var fubarFunc   = jThis.attr ("onclick");

        /*--- fubarFunc will typically be like:
            DP_jQuery_1325718069430.datepicker._selectDay('#pickMe',0,2012, this);return false;
        */
        fubarFunc       = fubarFunc.replace (/return\s+\w+;/i, "");

        jThis.removeAttr ("onclick");
        jThis.click ( function () {
            eval (fubarFunc);
            cleanUpCrappyEventHandling ();
        } );
    } );
}

    You can load this and test it against this page at jsBin.

    • 0