原生态日历控件
来源：互联网 发布：二级c语言考试时间 编辑：程序博客网 时间：2024/04/29 06:37
1.datetime.jsp
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>日历</title>
<link type="text/css" href="css/datetime.css" rel="stylesheet" />
<script src="js/datetime.js" type="text/javascript"></script>
</head>
<body>
<div class="clearfix dome3_box">
<!--日历 begin-->
<div class="data_box" id="data_box">
<span class="showDate" >点击选择日期</span>
<div class="sel_date dn">
<div class="clearfix">
<span class="prev_y fl"><<</span><span class="prev_m fl"><</span>
<span class="next_y fr">>></span><span class="next_m fr">></span>
<div class="show_mn">
<input type="text" class="showDate2 year" value="选择年份" />
<span class="ml5 mr5">年</span>
<input type="text" class="showDate2 month" value="选择月份" />
<span class="ml5">月</span>
</div>
</div>
<table class="data_table">
<thead>
<tr>
<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--日历 end-->
</div>
</body>
</html>
2.datetime.js
LiChang = {
getByClass: function (oPare, cla) {
var oChild = oPare.getElementsByTagName("*");
var arr = [];
for (var i = 0; i < oChild.length; i++) {
var arrCla = oChild[i].className.split(" ");
var j;
for (var j in arrCla) {
if (arrCla[j] == cla) {
arr.push(oChild[i]);
break;
}
}
}
return arr;
}
}
function showDate(option) {
this.obj = document.getElementById(option.id);
}
showDate.prototype.init = function () {
var _self = this;
_self.dateText = LiChang.getByClass(_self.obj, "showDate")[0];
_self.dateBox = LiChang.getByClass(_self.obj, "sel_date")[0];
_self.yearBox = LiChang.getByClass(_self.obj, "year")[0];
_self.mnBox = LiChang.getByClass(_self.obj, "month")[0];
_self.dataTable = LiChang.getByClass(_self.dateBox, "data_table")[0];
_self.tbody = _self.dataTable.tBodies[0];
_self.td = _self.tbody.getElementsByTagName("td");
_self.prevM = LiChang.getByClass(_self.dateBox, "prev_m")[0];
_self.nextM = LiChang.getByClass(_self.dateBox, "next_m")[0];
_self.prevY = LiChang.getByClass(_self.dateBox, "prev_y")[0];
_self.nextY = LiChang.getByClass(_self.dateBox, "next_y")[0];
//显示日历
_self.dateText.onclick = function () {
_self.changeDefault(this);
_self.show();
//_self.showNow();
//_self.dateText.blur();
}
//点击空白 隐藏日历
document.onclick = function (event) {
event = event || window.event;
var Target = event.target || event.srcElement;
_self.hide(event, Target, this);
}
//点击选择日期
for (var i = 0; i < _self.td.length; i++) {
_self.td[i].onclick = function () {
var newDd = this.innerHTML;
var newYear = parseInt(_self.yearBox.value, 10);
var newMn = parseInt(_self.mnBox.value, 10);
if (newDd.match(/^\s{0}$/g)) { //如果td有值;
return false;
}
if (isNaN(newYear) || isNaN(newMn) || newYear < 1900 || newYear > 2099 || newMn < 1 || newMn > 12) { //如果td有值;
//alert("请填写正确的年和月！");
return false;
}
_self.dateText.innerHTML = newYear + "年" + newMn + "月" + newDd + "日";
_self.dateBox.className += " ";
_self.dateBox.className += "dn";
}
_self.td[i].onmouseover = function () {
if (this.className.indexOf("hove") == -1) {
this.className += " hover";
}
}
_self.td[i].onmouseout = function () {
this.className = this.className.replace("hover", "")
}
}
//点击切换月份
_self.prevM.onclick = _self.nextM.onclick = function () {
_self.changeMn(this);
return this;
}
//点击切换年份
_self.prevY.onclick = _self.nextY.onclick = function () {
_self.changeYr(this);
return this;
}
_self.yearBox.onkeyup = _self.mnBox.onkeyup = function () {
this.value = this.value.replace(/\D/g, "");
var year = parseInt(_self.yearBox.value, 10);
var month = parseInt(_self.mnBox.value, 10);
if (!isNaN(year) && year <= 2099 && year >= 1900 && !isNaN(month) && month <= 12 && month >= 1) {
_self.showAllDay(year, month - 1);
}
if (this == _self.yearBox && year >= 1900 && year <= 2099) {
_self.mnBox.focus();
} else if (this == _self.mnBox && (month < 1 || month > 12)) {
if (this.value.slice(0, 1) > 1) { //如果第一位大于1
this.value = this.value.slice(0, 1);
} else if (month > 12) { //
this.value = 12;
}
year = parseInt(_self.yearBox.value, 10);
month = parseInt(_self.mnBox.value, 10);
_self.showAllDay(year, month - 1);
}
}
_self.yearBox.onblur = function () {
var year = parseInt(this.value, 10);
if (year < 1900 || year > 2099 || isNaN(year)) {
this.focus();
alert("请输入正确年份！");
this.value = "";
}
}
_self.mnBox.onfocus = function () {
var year = parseInt(_self.yearBox.value, 10);
if (isNaN(year)) {
_self.yearBox.focus();
}
}
_self.mnBox.onblur = function () {
var month = parseInt(this.value, 10);
var year = parseInt(_self.yearBox.value, 10);
if (month < 1 || month > 12 || isNaN(month)) {
alert("请输入正确月份！");
this.value = "";
}
}
}
//点击切换月份
showDate.prototype.changeMn = function (obj) {
var _self = this;
var NewMn = parseInt(_self.mnBox.value, 10);
var newYear = parseInt(_self.yearBox.value, 10);
if (isNaN(NewMn) || isNaN(newYear)) {
alert("请填写正确的年和月！");
return false;
}
if (obj == _self.nextM) {
NewMn++;
} else {
NewMn--;
}
if (NewMn < 1) {
NewMn = 12;
newYear -= 1;
} else if (NewMn > 12) {
NewMn = 1;
newYear += 1;
}
_self.mnBox.value = NewMn;
_self.showNow(newYear, NewMn);
}
//点击切换年份
showDate.prototype.changeYr = function (obj) {
var _self = this;
var NewMn = parseInt(_self.mnBox.value, 10);
var newYear = parseInt(_self.yearBox.value, 10);
if (isNaN(NewMn) || isNaN(newYear)) {
alert("请填写正确的年和月！");
return false;
}
if (obj == _self.nextY) {
newYear++;
} else {
newYear--;
}
if (newYear < 1900) {
newYear = 1900;
} else if (newYear > 2099) {
newYear = 2099;
}
_self.mnBox.value = NewMn;
_self.showNow(newYear, NewMn);
}
//文本框 清空初始值
showDate.prototype.changeDefault = function (obj) {
var _self = this;
var deVal = obj.innerHTML;
var regExp = /^\s{0,}$/g;
if (deVal == "点击选择日期") {
obj.innerHTML = "";
_self.showNow();
} else if (deVal.match(regExp) === null && _self.dateBox.className.indexOf("dn") != -1) { //如果显示的是非空字符
var dayArr = deVal.match(/[0-9]{1,4}/g);
_self.showNow(dayArr[0], dayArr[1], dayArr[2]); //刷新日期
prompt(dayArr[0]);
}
}
//文本框 还原初始值
showDate.prototype.changeDefault2 = function (obj) {
var _self = this;
var deVal = obj.innerHTML;
if (deVal.match(/^\s{0}$/)) {
obj.innerHTML = "点击选择日期";
}
}
//显示日历
showDate.prototype.show = function () {
var _self = this;
if (_self.dateBox.className.indexOf("dn") != -1) {
var cls = _self.dateBox.className;
_self.dateBox.className = cls.replace("dn", "");
}
}
//隐藏日历
showDate.prototype.hide = function (event, Target, obj) {
var _self = this;
var oPare = Target.parentNode;
var isChild = true; //默认是子元素
if (oPare == obj || Target == obj) {
isChild = false;
} else {
loop: while (oPare != _self.obj) {
oPare = oPare.parentNode;
if (oPare == obj) {
isChild = false;
break loop;
}
}
}
if (!isChild && _self.dateBox.className.indexOf("dn") == -1) {
_self.dateBox.className += " ";
_self.dateBox.className += "dn";
_self.changeDefault2(_self.dateText);
}
}
//填充年、月
showDate.prototype.showNow = function (yr, mn, date) {
var _self = this;
var now = new Date();
var year = yr || now.getFullYear();
var month = mn - 1 || now.getMonth();
var dd = date || now.getDate();
//填充 年 和 月
_self.yearBox.value = year;
_self.mnBox.value = mn || now.getMonth() + 1;
//填充日期
_self.showAllDay(year, month, dd);
}
//填充当月的所有日期
showDate.prototype.showAllDay = function (Yr, Mn, Dd) {
var _self = this;
var arr31 = [1, 3, 5, 7, 8, 10, 12];
var is31 = true;
var newDd = new Date(); //根据传入的数值生成新的日期
Dd = Dd ? Dd : newDd.getDate();
newDd.setFullYear(Yr, Mn, Dd);
var year = newDd.getFullYear(),
month = newDd.getMonth(),
dd = newDd.getDate();
var firstD = new Date();
firstD.setFullYear(year, month, 1);
var firstDay = firstD.getDay();
var str31 = arr31.join(",");
var regExp = eval("/" + (month + 1) + ",|," + (month + 1) + ",|," + (month + 1) + "/g");
var dayLen = 31;
//判断每个月有多少天
if (str31.search(regExp) == -1) {
dayLen = 30;
}
//清空日期
for (var i = 0; i < _self.td.length; i++) {
_self.td[i].innerHTML = "";
_self.td[i].className = _self.td[i].className.replace("active", "");
}
//如果有31天
for (var j = 0; j < dayLen; j++) {
_self.td[j + firstDay].innerHTML = j + 1;
if (j + 1 == dd && _self.td[j + firstDay].className.indexOf("active") == -1) {
_self.td[j + firstDay].className += " ";
_self.td[j + firstDay].className += "active";
}
}
}
//函数调用
window.onload = function () {
var showDate1 = new showDate({ id: "data_box" });
showDate1.init();
};
3.datetime.css
* {padding:0;margin:0;font-size:12px;}
.fl {float:left}
.fr {float:right}
.dn {display:none}
/*日历 begin*/
.data_box {width:260px; }
.showDate {width:248px;height:30px;line-height:30px;padding:0 5px;border:1px solid #e1e1e1;color:#000000;display:block;cursor:pointer}
.show_mn {text-align:center;padding:0 20px;}
.sel_date {margin-top:10px;border:1px solid #999;padding:3px}
.data_table {width:100%;margin-top:10px;}
.data_table td {text-align:center;cursor:pointer;height:24px;font-size:14px;}
.data_table td.active {color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2 {width:35px;padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active {border:1px solid #c50000; }
.prev_m,.next_m {width:10px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体"}
.prev_y,.next_y {width:18px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体";margin:0 5px;}
- 原生态日历控件
- Cocos2d怎样使用原生态的控件
- 原生态
- IOS原生态刷新控件实用——UIRefreshControl
- 原生态模型
- jdk6原生态webservice
- 原生态ajax使用
- Ajax原生态
- Javascript原生态
- hibernate原生态sql
- 原生态异步提交
- jdk6原生态webservice
- listview原生态属性
- 原生态APP图片尺寸
- 注解--原生态底层
- 原生态AJAX
- mysql原生态DDL
- Ajax原生态
- 大话CASSANDRA数据模型
- 当request中的list为空时，在页面显示 没有记录
- 基于STM32的SDIO用4位总线24MHZDMA模式操作SHDC卡
- 使用eagle导出国内PCB制板商可用的gerber文件 | APLUSA +复制链接
- UVa 10469 To Carry or not to Carry (异或)
- 原生态日历控件
- asp.net ajax回调函数
- s标签传值时候，，值太长的话，传递值就会失败
- Mac下配置Eclipse内存，解决Eclipse内存溢出问题
- 加密brief
- Java内功基础（一）对象导论
- 做有良心的开发者
- poj 1308 - Is It A Tree?(并查集)
- OCP-1Z0-051-V9.02-105题
