[英]Add a Date Picker to a textbox using Greasemonkey
There is a textbox that requires a date but has no date picker. 有一个需要日期但没有日期选择器的文本框。 I would like to add one with Greasemonkey.
我想添加一个与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.
不必花哨。
I like to use jQuery UI's datepicker() because I usually have jQuery UI loaded anyway, and it's fairly well-known/supported. 我喜欢使用jQuery UI的datepicker(),因为无论如何我通常都会加载jQuery UI,并且它是众所周知的/受支持的。
Unfortunately, the datepicker functionality uses some criminally-bad event code, which requires a little fudging to work in a sandboxed environment. 不幸的是,日期选择器功能使用了一些犯罪行为严重的事件代码,在沙盒环境中工作需要一些摸索。
Still, its not too difficult. 尽管如此,它并不太困难。 Here is a complete Greasemonkey script:
这是完整的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 ();
} );
} );
}
You can load this and test it against this page at jsBin . 您可以在jsBin对此页面进行加载并对其进行测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.