Non -saying, the principle of implementation is mainly to deal with TABLE and generate TR TD. The most important thing is how to find the first day of the first day of each month, and then you can correspond to the remaining days of this month.
First of all, say that some people say that this is repeated wheels, but I don’t think it ’s a project, you ca n’t always take someone else’ s things. It ’s not a thing of God. Of course Nothing to say, at least saying that I do it myself, it is more convenient to change or expand
effect and code are as follows. The preview effect is placed in HTML and puts it on this page.
effect and code are as follows. The preview effect is placed in HTML and puts it on this page.
Copy codecode is as follows:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<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: absolute; 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; height: 19px; 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-bottom: 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>
</head>
<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 parcels
var sookerTime = (function ($) {
var OBJ;
function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); }
function isvalid (d) {Return (d.gettime () – (new date ()). Gettime () <0)? True: false;} // Whether it will be after today after today
function setdate (year, month) {// Create date table
var n1 = new Date(year, month, 1),
firstday = n1.getDay(),
mdays = new Array(31, 28 + isLeap(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 (ISVALID (New Date (Year, MONTH, D))) {// The time will not bind time today
td.addClass(“before”);
td.hover(function () {
$(this).addClass(“day”);
}, 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 + 18, 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 = ’10 ‘> November </option> <option value = ’11’> December </option> </select> <select class = ‘Year’> <option value = ‘2009’> 2009 </option> <option value = ‘2010’> 2010 </option> <option value = ‘2011’> 2011 </option> </div> </div> > <ul class = ‘weeks’> <li> Day </li> <li> One </li> </li> <li> </li> <li> Four </li> < li> Five </li> <li> Six </li> </ul> “”;
calendar.css({ left: of.left, top: of.top + 18 }).html(se).appendTo($(“body”));
setDate(td.getFullYear(), td.getMonth());
$(“#calendar .year”).attr(“value”, td.getFullYear());
$(“#calendar .month”).attr(“value”, td.getMonth());
bindClick();
}
}
function bindclick () {// Bind the time for the drop -down list
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) {// Return to call interface
OBJ = obj;
createTime();
}
}
})(jQuery);
// How to use
$(“.tiemin”).focus(function(){
sookerTime.init($(this));
});
</script>
</body>
</html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<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: absolute; 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; height: 19px; 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-bottom: 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>
</head>
<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 parcels
var sookerTime = (function ($) {
var OBJ;
function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); }
function isvalid (d) {Return (d.gettime () – (new date ()). Gettime () <0)? True: false;} // Whether it will be after today after today
function setdate (year, month) {// Create date table
var n1 = new Date(year, month, 1),
firstday = n1.getDay(),
mdays = new Array(31, 28 + isLeap(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 (ISVALID (New Date (Year, MONTH, D))) {// The time will not bind time today
td.addClass(“before”);
td.hover(function () {
$(this).addClass(“day”);
}, 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 + 18, 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 = ’10 ‘> November </option> <option value = ’11’> December </option> </select> <select class = ‘Year’> <option value = ‘2009’> 2009 </option> <option value = ‘2010’> 2010 </option> <option value = ‘2011’> 2011 </option> </div> </div> > <ul class = ‘weeks’> <li> Day </li> <li> One </li> </li> <li> </li> <li> Four </li> < li> Five </li> <li> Six </li> </ul> “”;
calendar.css({ left: of.left, top: of.top + 18 }).html(se).appendTo($(“body”));
setDate(td.getFullYear(), td.getMonth());
$(“#calendar .year”).attr(“value”, td.getFullYear());
$(“#calendar .month”).attr(“value”, td.getMonth());
bindClick();
}
}
function bindclick () {// Bind the time for the drop -down list
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) {// Return to call interface
OBJ = obj;
createTime();
}
}
})(jQuery);
// How to use
$(“.tiemin”).focus(function(){
sookerTime.init($(this));
});
</script>
</body>
</html>