使用 Greasemonkey 将日期选择器添加到文本框 [英] Add a Date Picker to a textbox using Greasemonkey

问题描述

有一个需要日期但没有日期选择器的文本框.我想用 Greasemonkey 添加一个.我找了一个例子，但找不到.

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.

推荐答案

我喜欢使用 jQuery UI 的 datepicker() 因为我通常会加载 jQuery UI，而且它是众所周知的/受支持的.

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.

不过，这并不难.这是一个完整的 Greasemonkey 脚本:

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 (/returns+w+;/i, "");

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

您可以加载它并针对 jsBin 上的此页面 进行测试.

这篇关于使用 Greasemonkey 将日期选择器添加到文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！