使用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.

不幸的是，datepicker功能使用了一些刑事不良的事件代码，这需要在沙盒环境中工作的一点点软硬。

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

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

您可以加载并对其进行测试， a href =http://jsbin.com/ukelij/2 =nofollow>这个页面在jsBin 。

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