日付が必要ですが、何の日付ピッカーを持っていないテキストボックスがありGreasemonkeyの

Question

使用して、テキストボックスに日付ピッカーを追加します。私はGreasemonkeyで1つ追加したいと思います。私は例を探しましたが、見つけられませんでした。

これは可能ですか？これを行う例はありますか？それは空想的である必要はありません。

Answer 1

は、私は通常、jQueryのUIはとにかくロードされているのでjQuery UI's datepicker()を使用するように、それはかなりサポート/よく知られているのです。

残念ながら、日付ピッカー機能は、サンドボックス環境で動作するように少しfudgingを必要とし、いくつかの犯罪・不正なイベントコードを使用しています。

それでも

、そのあまりにも難しいことではありません。

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

あなたはこれをロードしthis page at jsBinに対してそれをテストすることができます。ここでは完全なGreasemonkeyのスクリプトです。