First, said some people say this is the repetition makes the wheel, but I think is not, does the project, cannot always take other people's thing to come, the copycat is not the god horse fun idea, certainly if you want to relax, also did not say, at least said that I did, I changed up or extended more convenient
The effect as well as the code below, the preview effect put yourself in the HTML inside put, get on this page is very troublesome
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>untitled page</title>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></ Script>
<style type= "Text/css" >
*{margin:0;padding:0;}
/* Date Control/*
. pc_caldr {background-color: #FFFFFF; border:1px solid #CCCCCC; color: #000000; height:auto; padding:5px; position:ab Solute; width:161px; Z-index:10; }
. pc_caldr. selector {height:24px; padding:2px 0 0;}
. pc_caldr. Selector month,. Pc_caldr. Selector. Year {border:1px solid #CCCCCC; float:left; font-size:12px 9px; width:73px; }
. Pc_caldr. Selector. year {margin-left:10px; width:78px;}
. Pc_caldr. Weeks,. Pc_caldr. Days {list-style:none outside none; margin:0; padding:0; width:100%!important;}
. Pc_caldr. Weeks {background:none Repeat scroll 0 0 #B6D1F9; color: #FFFFFF; font-size:12px; height:18px; margin-botto m:2px; }
. Pc_caldr. Days {font-family:arial; font-size:12px; height:auto;}
. Pc_caldr. Weeks li,. Pc_caldr. Days li {float:left; height:18px; line-height:18px; text-align:center; width:23px;}
. pc_caldr. Weeks li {text-align:center;}
. pc_caldr table {width:100%;}
. pc_caldr table Td{text-align:center;
. pc_caldr table Td.before {color: #43609C; cursor:pointer;}
. pc_caldr table Td.day {background-color: #5D94E6; color: #FFFFFF;}
/* Text Box * *
. tiemin{width:120px;border:1px solid #f00;}
. inline-block {display:inline-block; zoom:1; *display:inline; vertical-align:middle;}
</style>
<body>
<div style= "height:200px;" >
</div>
<input type= "text" class= "Tiemin" readonly= "readonly"/>
<div style= "height:200px;" >
</div>
<span style= "width:200px" class= "Inline-block" ></span>
<input type= "text" class= "Tiemin" readonly= "readonly"/>
<script type= "Text/javascript" >
All Packages
var sookertime = (function ($) {
var OBJ;
function Isleap (year) {return (year% 100 = 0?) (Year% = 0 1:0): (Year 4 = 0? 1:0)); }
function IsValid (d) {return (D.gettime ()-(New Date ()). GetTime () < 0)? True:false}//whether after today
Function setdate (year, month) {//Build date Table
var n1 = new Date (year, month, 1),
FirstDay = N1.getday (),
Mdays = new Array (year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
rows = Math.ceil ((Mdays[month] + firstday)/7),
Table = $ ("<table>", {"Class": "Days"}),
Tbody = $ ("<tbody>");
$ ("#calendar"). Find (". Days"). Remove ();
for (var i = 0; i < rows; i++) {
var tr = $ ("<tr>");
for (j = 0; J < 7; J + +) {
var idx = i * 7 + j,
D = idx-firstday + 1;
if (d <= 0 | | | d > mdays[month]) {//invalid date
D = ""
}
var td = $ ("<td>", {html:d}). Appendto (TR);
if (new Date (year, month, D)) {//IsValid time after today is not binding
Td.addclass ("before");
Td.hover (function () {
$ (this). addclass (' Day ');
The function () {$ (this). Removeclass (' Day ');}). Click (function () {
Obj.attr ("Value", $ ("#calendar. Year"). attr ("value") + "-" + (parseint ($ ("#calendar. Month"). attr ("value") + 1) + "-" + $ (this). text ());
$ ("#calendar"). CSS ("display", "none");
});
}
}
Tr.appendto (TBODY);
}
Tbody.appendto (table);
$ ("#calendar"). Append (table);
}
function Createtime () {
var calendar = $ ("<div>", {"Class": "Pc_caldr", ID: "Calendar"}),
td = New Date (),
of = Obj.offset ();
if (document.getElementById ("Calendar")) {
Calendar = $ ("#calendar"). CSS ({left:of.left, Top:of.top +, display: "Block"});
Setdate (Td.getfullyear (), Td.getmonth ());
$ ("#calendar. Year"). attr ("Value", td.getfullyear ());
$ ("#calendar. Month"). attr ("Value", Td.getmonth ());
} else {
var se = "<div class= ' selector ' ><select class= ' month ' ><option value= ' 0 ' > January </option>< Option value= ' 1 ' > February </option><option value= ' 2 ' > March </option><option value= ' 3 ' > April </ Option><option value= ' 4 ' > May </option><option value= ' 5 ' > June </option><option value= ' 6 ' > July </option><option value= ' 7 ' > August </option><option value= ' 8 ' > September </option>< Option value= ' 9 ' > October </option><option value= ' ten ' > November </option><option value= ' one ' > December </ Option></select><select class= ' year ' ><option value= ' 2009 ' >2009</option><option Value= ' >2010</option><option value= ' >2011</option></select></div> <ul class= ' weeks ' ><li> day </li><li> one </li><li> two </li><li> three </li ><li> four </li><li> five </li><li> six </li></ul> ";
Calendar.css ({left:of.left, Top:of.top +}). html (SE). Appendto ($ ("body"));
Setdate (Td.getfullyear (), Td.getmonth ());
$ ("#calendar. Year"). attr ("Value", td.getfullyear ());
$ ("#calendar. Month"). attr ("Value", Td.getmonth ());
Bindclick ();
}
}
function Bindclick () {///drop down list binding time between
var a = $ ("#calendar. Month"),
B = $ ("#calendar. Year");
A.change (function () {
Setdate (B.attr ("value"), $ (this). attr ("value"));
});
B.change (function () {
Setdate ($ (this). attr ("value"), A.attr ("value"));
});
}
return {
Init:function (obj) {//returns the invoked interface
obj = obj;
Createtime ();
}
}
}) (JQuery);
How to use
$ (". Tiemin"). focus (function () {
Sookertime.init ($ (this));
});
</script>
</body>
