Home > Developer > JavaScript
Date Control Implemented by JavaScript
It also reads the current time
[Html]
<Html>
<Head>
<Style>
<! --
. Wr {font-size: 12pt; line-height: 22px}
. Wr1 {FONT-SIZE: 12px; LINE-HEIGHT: 200%}
. Wr2 {FONT-SIZE: 14px; LINE-HEIGHT: 200%}
. Wr3 {FONT-SIZE: 12px}
. Wr4 {FONT-SIZE: 12px; LINE-HEIGHT: 150%}
// -->
</Style>
<Title> automatic Date input control </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
</Head>
<Style type = "text/css">
. 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 {
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. 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 + 'dateicker ';
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 + 'dateicker "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 + 'dateicker "class =" noborder "> '+ week [I] +' </td> ');
For (var I = 0; I <D. _ fd (); I ++) con. push ('<td title = "' + this. n + 'dateicker "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 + 'dateicker "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.tar get | e. srcElement;
If (t. title! = _ This. n + 'dateicker') {_ 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 | 'dateicker ';
Mask. src = 'javascript: false ';
Mask. frameBorder = 0;
Box.style.css Text = 'position: absolute; display: none; z-index: 9999 ';
Mask.style.css Text = 'position: absolute; display: none; z-index: 100 ';
Box. title = this. n + 'dateicker ';
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 ',
Seprator :'-'
});
}
</Script>
<Body bgcolor = "# FFFFDB" text = "#000000" leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0">
<Form>
<Table border = "0" width = "60%" align = "center">
<Tr>
<Td width = "45%" class = "wr4" align = "right"> birthday: </td>
<Td width = "55%" class = "wr4">
<Input type = "text" name = "mtime" id = "date-input"> <font color = "RED"> * </font>
</Td>
</Tr>
<Tr>
<Td width = "45%" align = "right"> <input type = "submit" value = "OK"/> </td>
<Td width = "55%"> <input type = "reset" value = "reset"/> </td>
</Tr>
</Table>
</Form>
</Body>
</Html>
Js execution sequence on the html page:
1) the first execution in the head label
2) execution in the body Tag
3) when the onload event is added to the body tag, the corresponding js is finally executed, that is, when the page is loaded
Note: When an onload event is added to the body tag, the referenced external js does not work in the head tag, it can be referenced normally when external js is referenced inside the body or above
From Huang Zhichao's column
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
