JQ's UI has, Yui's widget also has. But also the package of solid, compatibility, versatility, are doing very well. So in the code is perfect, the amount of code is naturally not less. The code is hundreds of lines even if it is built on the base library.
The actual use may not require such a complete function. Let's write a humble thing, enough for ourselves.
And before a friend put forward my hair is some entertainment goods, there is no practical, this time when it is a start, throw a brick, and then occasionally send a with some practical things.
<!--The following demo has no place to go, just for the needy friends to see-->
<! DOCTYPE html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title>DatePicker</title> <meta name= Author" content= "Hongru.chen"/> < Style>. date-picker-wp {display:none; Position:absolute; Background: #f1f1f1; left:40px; top:40px; BORDER-TOP:4PX solid #3879d9; }. date-picker-wp Table {border:1px solid #ddd; }. DATE-PICKER-WP td {background: #fafafa; width:22px; height:18px; border:1px solid #ccc; font-size:12px; Text-align:center; }. date-picker-wp Td.noborder {border:none; Background:none; }. date-picker-wp td a {color: #1c93c4; Text-decoration:none; }. Strong {Font-weight:bold}. Hand {Cursor:pointer color: #3879d9} </style> <script type= "Text/javascript" > var datepicker = function () {var $ = function (i) {return document.getElementById (i)}, addevent = function (O, E , f) {O.addeventlistener O.addeventlistener (E, F, falsE): O.attachevent (' on ' +e, function () {F.call (O)})}, GetPos = function (EL) {for (var pos = {x:0, y:0}; el; el = el.offs Etparent) {pos.x + = El.offsetleft; Pos.y + = El.offsettop; return POS; var init = function (n, config) {window[n] = this; DATE.PROTOTYPE._FD = function () {var d = new Date (this), D.setdate (1), Return D.getday ()}; Date.prototype._fc = function () {var D1 = new Date (this), D2 = new Date (this); D1.setdate (1); d2.setdate (1); D2.setmonth ( D2.getmonth () +1); Return (D2-D1)/86400000;}; THIS.N = n; this.config = config; This. D = new Date; This.el = $ (Config.inputid); This.el.title = this.n+ ' DatePicker '; This.update (); This.bind (); } Init.prototype = {update:function (y, m) {var con = [], week = [' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa '], D = this. D, _this = this; fn = function (A, b) {return ' <td title= ' ' +_this.n+ ' datepicker ' class= ' noborder hand ' onclick= ' ' +_this.n+ '. Update (' +a + ') ' > ' +b+ ' </td> '}, _html = ' <table cellpadding=0 cellspaciNg=2> '; Y && d.setyear (d.getfullyear () + y); M && D.setmonth (D.getmonth () + M); var year = D.getfullyear (), month = D.getmonth () + 1, date = D.getdate (); for (var i=0 i<week.length; i++) con.push (' <td title= ' ' +this.n+ ' datepicker ' "class= ')" Noborder "> ' +week[i]+ ' </td> '); for (var i=0; i<d._fd (); i++) Con.push (' <td title= ' ' +this.n+ ' DatePicker "class= ');" Noborder "> </td>"); for (Var i=0 i<d._fc (); i++) Con.push (' <td class= "Hand" onclick= "' +this.n+ '. Fillinput (' +year+ ', ' +month+ ', ') ' + (i+ 1) + ' > ' + (i+1) + ' </td> '); var toend = con.length%7; if (toend!= 0) for (var i=0; i<7-toend; i++) Con.push (' <td class= ' noborder ' > </td> '); _html + = ' <tr> ' +fn ("-1, null", "<<") +FN ("NULL,-1", "<") + ' <td title= ' ' +this.n+ ' DatePicker ' colspan=3 Class= "Strong" > ' +year+ '/' +month+ '/' +date+ ' </td> ' +FN ("null, 1", ">") +fn ("1, null", ">>") + ' </tr > '; for (var i=0 i<con.length; i++) _html + = (i==0 ? ' <tr> ': i%7==0? ' </tr><tr> ': ' + con[i] + (i = = con.length-1? ' </tr> ': '); !! This.box? This.box.innerHTML = _html:this.createbox (_html); }, Fillinput:function (Y, M, d) {var s = this.config.seprator | | '/'; This.el.value = y + S + m + S + D; This.box.style.display = ' None '; }, Show:function () {var s = this.box.style, is = This.mask.style; S[' Left '] = is[' left ' = GetPos (This.el). x + ' px '; s[' top '] = is[' top ' = GetPos (this.el). Y + this.el.offsetHeight + ' px '; s[' Display '] = is[' Display ' = ' block '; is[' width ' = this.box.offsetwidth-2 + ' px '; is[' height '] = this.box.offsetheight-2 + ' px '; }, Hide:function () {this.box.style.display = ' none '; This.mask.style.display = ' None '; }, Bind:function () {var _this = this; Addevent (document, ' click ', Function (e) {e = e | | window.event; var t = E.target | | E.srcelement; if (t.title!= _this.n+ ' DatePicker ') {_this.hide ()} else {_this.show ()}}), Createbox:function (HTML) {var box = This.box = document.createelement (' div ') mask = This.mask = document.createelement (' iframe '); Box.classname = This.config.className | | ' DatePicker '; MASK.SRC = ' Javascript:false '; Mask.frameborder = 0; Box.style.cssText = ' position:absolute;display:none;z-index:9999 '; Mask.style.cssText = ' position:absolute;display:none;z-index:9998 '; Box.title = this.n+ ' DatePicker '; box.innerhtml = html; Document.body.appendChild (box); Document.body.appendChild (mask); return box; } return init; }(); onload = function () {New DatePicker (' _datepicker_demo ', {inputid: ' Date-input ', className: ' Date-picker-wp ', Seprat Or: '-'}); New DatePicker (' _demo2 ', {inputid: ' Demo2 ', className: ' DATE-PICKER-WP '})} </script></pead> <body> <input type= "text" id= "Date-input"/> <input type= "text" id= "Demo2"/><br> <select><option& gt; Zenghan </option></select> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The following is the source code:
Copy Code code as follows:
var datepicker = function () {
var $ = function (i) {return document.getElementById (i)},
addevent = function (o, E, f) {O.addeventlistener? O.addeventlistener (E, F, false): O.attachevent (' on ' +e, function () {F.C All (O)})},
GetPos = function (EL) {
for (var pos = {x:0, y:0}; el; el = el.offsetparent) {
Pos.x + = El.offsetleft;
Pos.y + = El.offsettop;
}
return POS;
}
var init = function (n, config) {
Window[n] = this;
DATE.PROTOTYPE._FD = function () {var d = new Date (this), D.setdate (1), Return D.getday ()};
Date.prototype._fc = function () {var D1 = new Date (this), D2 = new Date (this); D1.setdate (1); d2.setdate (1); D2.setmonth ( D2.getmonth () +1); Return (D2-D1)/86400000;};
THIS.N = n;
this.config = config;
This. D = new Date;
This.el = $ (Config.inputid);
This.el.title = this.n+ ' DatePicker ';
This.update ();
This.bind ();
}
Init.prototype = {
Update:function (Y, m) {
var con = [], week = [' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa '], D = this. D, _this = this;
fn = function (A, b) {return ' <td title= ' ' +_this.n+ ' datepicker ' class= ' noborder hand ' onclick= ' ' +_this.n+ '. Update (' +a + ') ' > ' +b+ ' </td> '},
_html = ' <table cellpadding=0 cellspacing=2> ';
Y && d.setyear (d.getfullyear () + y);
M && D.setmonth (D.getmonth () + M);
var year = D.getfullyear (), month = D.getmonth () + 1, date = D.getdate ();
for (var i=0 i<week.length; i++) con.push (' <td title= ' ' +this.n+ ' datepicker ' "class= ')" Noborder "> ' +week[i]+ ' </td> ');
for (var i=0; i<d._fd (); i++) Con.push (' <td title= ' ' +this.n+ ' DatePicker "class= ');" Noborder "> </td>");
for (Var i=0 i<d._fc (); i++) Con.push (' <td class= "Hand" onclick= "' +this.n+ '. Fillinput (' +year+ ', ' +month+ ', ') ' + (i+ 1) + ' > ' + (i+1) + ' </td> ');
var toend = con.length%7;
if (toend!= 0) for (var i=0; i<7-toend; i++) Con.push (' <td class= ' noborder ' > </td> ');
_html + = ' <tr> ' +fn ("-1, null", "<<") +FN ("NULL,-1", "<") + ' <td title= ' ' +this.n+ ' DatePicker ' colspan=3 Class= "Strong" > ' +year+ '/' +month+ '/' +date+ ' </td> ' +FN ("null, 1", ">") +fn ("1, null", ">>") + ' </tr > ';
for (var i=0 i<con.length; i++) _html = = (i==0? ' <tr> ': i%7==0? ' </tr><tr> ': ' + con[i] + (i = = con.length-1? ' </tr> ': ');
!! This.box? This.box.innerHTML = _html:this.createbox (_html);
},
Fillinput:function (Y, M, d) {
var s = This.config.seprator | | '/';
This.el.value = y + S + m + S + D;
This.box.style.display = ' None ';
},
Show:function () {
var s = this.box.style, is = This.mask.style;
S[' Left '] = is[' left ' = GetPos (This.el). x + ' px ';
s[' top '] = is[' top ' = GetPos (this.el). Y + this.el.offsetHeight + ' px ';
s[' Display '] = is[' Display ' = ' block ';
is[' width ' = this.box.offsetwidth-2 + ' px ';
is[' height '] = this.box.offsetheight-2 + ' px ';
},
Hide:function () {
This.box.style.display = ' None ';
This.mask.style.display = ' None ';
},
Bind:function () {
var _this = this;
Addevent (document, ' click ', Function (e) {
E = e | | window.event;
var t = E.target | | E.srcelement;
if (t.title!= _this.n+ ' DatePicker ') {_this.hide ()} else {_this.show ()}
})
},
Createbox:function (HTML) {
var box = This.box = document.createelement (' div '), mask = This.mask = document.createelement (' iframe ');
Box.classname = This.config.className | | ' DatePicker ';
MASK.SRC = ' Javascript:false ';
Mask.frameborder = 0;
Box.style.cssText = ' position:absolute;display:none;z-index:9999 ';
Mask.style.cssText = ' position:absolute;display:none;z-index:9998 ';
Box.title = this.n+ ' DatePicker ';
box.innerhtml = html;
Document.body.appendChild (box);
Document.body.appendChild (mask);
return box;
}
}
Return init;
}();
Call Mode:
Copy Code code as follows:
New DatePicker (' _datepicker_demo ', {
inputID: ' Date-input ',
ClassName: ' Date-picker-wp ',
Seprator: '-'
});
First argument: instance name,
The second parameter is an object literal, including the ID of the input box (required), the classname of the pop-up calendar box, the separator for the date style such as '-', '/', etc. The latter two can be omitted, the default value ' DatePicker ', '/'.
