使用Greasemonkey向文本框添加日期选择器

Add a Date Picker to a textbox using Greasemonkey

本文关键字：添加 日期 选择器 文本 Greasemonkey 使用      更新时间：2023-09-26

有一个需要日期但没有日期选择器的文本框。我想加一份油猴。我找了一个例子，但找不到。

这可能吗?有这样做的例子吗?不需要太花哨

我喜欢使用jQuery UI的datepicker()，因为我通常会加载jQuery UI，它是相当知名的/支持的。

不幸的是，日期拾取器功能使用了一些非常糟糕的事件代码，这需要在沙盒环境中工作。

不过，这并不太难。下面是一个完整的Greasemonkey脚本:

// ==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 ();
        } );
    } );
}


您可以在jsBin中加载它并在此页面上进行测试。

相关文章：