Добавьте указатель даты в текстовое поле с помощью Greasemonkey - PullRequest
Новая
       5

Добавьте указатель даты в текстовое поле с помощью Greasemonkey

2 голосов
/ 05 января 2012

Существует текстовое поле, которое требует даты, но не имеет выбора даты. Я хотел бы добавить один с Greasemonkey. Я искал пример, но не смог его найти.

Возможно ли это? Есть ли пример для этого? Это не должно быть необычным.

1 Ответ

4 голосов
/ 05 января 2012

Мне нравится использовать dateQicker пользовательского интерфейса jQuery () , потому что у меня обычно загружается пользовательский интерфейс jQuery в любом случае, и он довольно хорошо известен / поддерживается.

К сожалению, функция DatePicker использует некоторые преступно-плохой код события, который требует небольшой выдумки для работы в изолированной среде.

Тем не менее, это не так уж сложно.Вот полный сценарий 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 .

...