Greasemonkey를 사용하여 텍스트 상자에 날짜 선택기 추가

Question

날짜가 필요하지만 날짜 선택 도구가없는 텍스트 상자가 있습니다. Greasemonkey를 추가하고 싶습니다. 나는 예제를 찾았지만 하나를 찾을 수 없었다.

이것이 가능합니까? 이 작업을 수행하는 예제가 있습니까? 그것은 멋질 필요가 없습니다.

Answer 1

저는 보통 어쨌든 jQuery UI가로드되어 있기 때문에 jQuery UI's datepicker()을 사용하고 있습니다. 이는 꽤 잘 알려진/지원됩니다.

불행히도 datepicker 기능은 악의적 인 이벤트 코드를 사용하기 때문에 샌드 박스 환경에서 약간의 퍼지 작업이 필요합니다.

여전히 어렵지 않습니다.

// ==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에 대해 그것을 테스트 할 수 있습니다 : 여기에 완전한 그리스 몽키 스크립트입니다.