日历控件
使用时请在我的blog中留言！
Mask.htc
//©2004 Mini Corporation. mqk2002@hotmail.com
<PUBLIC:EVENT NAME="onerror" ID="error"/>
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit"/>
<PUBLIC:ATTACH EVENT="onmouseover" HANDLER="InputMouseOver"/>
<PUBLIC:ATTACH EVENT="onmouseout" HANDLER="InputMouseOut"/>
<script language="jscript">
function click(){
if (!element.document.getElementById("oDateView")){
inithtml='<table border="0" width="200" cellspacing="0" cellpadding="0" height="145" id="oDateView" class="clsDateView" onblur="this.style.display=\'none\'">';
inithtml+='<tr class="clsDateViewHeader">';
inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"><<</td>';
inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"><</td>';
inithtml+=' <td width="14%" align="middle" height="21"></td>';
inithtml+=' <td width="14%" align="middle" height="21"></td>';
inithtml+=' <td width="14%" align="middle" height="21"></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;">></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;">>></td>';
inithtml+='</tr>';
inithtml+='<tr class="clsDateViewWeek">';
inithtml+=' <td width="15%" align="middle" height="21">日</td>';
inithtml+=' <td width="15%" align="middle" height="21">一</td>';
inithtml+=' <td width="14%" align="middle" height="21">二</td>';
inithtml+=' <td width="14%" align="middle" height="21">三</td>';
inithtml+=' <td width="14%" align="middle" height="21">四</td>';
inithtml+=' <td width="14%" align="middle" height="21">五</td>';
inithtml+=' <td width="14%" align="middle" height="21">六</td>';
inithtml+='</tr>';
for (i=3;i<9;i++){
inithtml+='<tr class="clsDateViewDay">';
inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>';
inithtml+='</tr>';
}
inithtml+='</table>';
element.document.body.insertAdjacentHTML("beforeEnd",inithtml);
oDateView.attachEvent("onclick",DateViewClick);
oDateView.attachEvent("onmouseover",DateViewMouseOver);
oDateView.attachEvent("onmouseout",DateViewMouseOut);
element.document.attachEvent("onclick",DocumentClick);
}
window.activedate=value;
window.activeobj=this;
BuildDate();
DisplayDateView();
}
function DateViewClick(){
var e = window.event.srcElement
switch (e.innerText){
case ">>":
ChangeDate(12);
break;
case "<<":
ChangeDate(-12);
break;
case ">":
ChangeDate(1);
break;
case "<":
ChangeDate(-1);
break;
default:
if (e.style.cursor=="hand"){
year=new Date(Date.parse(e.value)).getFullYear();
month=new Date(Date.parse(e.value)).getMonth()+1;
day=new Date(Date.parse(e.value)).getDate();
oDateView.style.display="none";
window.activeobj.value=year+"/"+month+"/"+day;
}
}
}
function DateViewMouseOver(){
var e = window.event.srcElement
if ((e.style.cursor=="hand")){
e.className="clsDateViewDayOver";
}
}
function DateViewMouseOut(){
var e = window.event.srcElement
if ((e.style.cursor=="hand")){
e.className="";
}
}
function ChangeDate(step){
year=new Date(Date.parse(window.activedate)).getFullYear();
month=new Date(Date.parse(window.activedate)).getMonth()+step;
day=new Date(Date.parse(window.activedate)).getDate();
window.activedate=new Date(year,month,day);
BuildDate();
}
function BuildDate() {
if (window.activedate==""){
year=new Date().getFullYear();
month=new Date().getMonth();
day=new Date().getDate();
}
else{
year=new Date(Date.parse(window.activedate)).getFullYear();
month=new Date(Date.parse(window.activedate)).getMonth();
day=new Date(Date.parse(window.activedate)).getDate();
}
window.activedate=year+"/"+eval(month+1)+"/"+day;
eval(oDateView).rows(0).cells(2).innerText=year;
eval(oDateView).rows(0).cells(3).innerText=month+1;
eval(oDateView).rows(0).cells(4).innerText=day;
var lastdate=new Date(year,month,0);
var date=new Date(year,month,1);
var maxday=new Date(year,month+1,0).getDate();
for (var i=0;i<7;i++){
var cell=eval(oDateView).rows(2).cells(i);
if (i<date.getDay()){
cell.innerText=lastdate.getDate()-date.getDay()+i+1;
cell.style.color="#999999";
cell.value=new Date(year,month-1,(lastdate.getDate()-date.getDay()+i+1));
}
else{
cell.innerText=i+1-date.getDay();
cell.style.color="#000000";
cell.value=new Date(year,month,i+1-date.getDay());
}
}
for(i=7;i<42;i++){
day=i+1-date.getDay();
var cell=eval(oDateView).rows(Math.floor(i/7)+2).cells(i%7);
if (day<=maxday){
cell.innerHTML=day;
cell.style.color="#000000";
cell.value=new Date(year,month,day);
}
else{
cell.innerHTML=day-maxday;
cell.style.color="#999999";
cell.value=new Date(year,month+1,day-maxday);
}
}
}
function DisplayDateView(){
oDateView.style.left=getOffsetLeft(element);
oDateView.style.top=getOffsetTop(element)+element.offsetHeight;
if (oDateView.style.display="none"){
oDateView.style.display="block";
}
else{
oDateView.style.display="none";
}
}
function DocumentClick(){
var e = window.event.srcElement;
if (((e.tagName.toLowerCase() != "input")||((e.tagName.toLowerCase() == "input")&&(e.preset==null)))&&(!IsExists(e,oDateView))){
oDateView.style.display="none";
}
}
function IsExists(src,dst){
if (src.tagName!="BODY"){
if (src.parentElement==dst) return true;
return IsExists(src.parentElement,dst)
}
return false;
}
function getOffsetLeft(src){
var set=0;
if(src)
{
if (src.offsetParent)
set+=src.offsetLeft+getOffsetLeft(src.offsetParent);
if(src.tagName!="BODY")
{
var x=parseInt(src.scrollLeft,10);
if(!isNaN(x))
set-=x;
}
}
return set;
}
function getOffsetTop(src){
var set=0;
if(src)
{
if (src.offsetParent)
set+=src.offsetTop+getOffsetTop(src.offsetParent);
if(src.tagName!="BODY")
{
var y=parseInt(src.scrollTop,10);
if(!isNaN(y))
set-=y;
}
}
return set;
}
//初始化控件
function DoInit()
{
var sTag = tagName.toLowerCase();
if (sTag == "input"){
attachEvent("onblur", InputBlur);
if (this.preset=="date") attachEvent("onclick",click);
}
}
//鼠标移动上触发
functionInputMouseOver(){
element.className="clsInputMouseOver";
}
//鼠标移出触发
functionInputMouseOut(){
element.className="clsInput";
}
function InputBlur()
{
if (value=="") return;
switch(this.preset)
{
case "date":
if (value=="") return
var reg = /^[1-2]{1,1}[0-9]{3,3}[/]{1,1}[0-9]{1,2}[/]{1,1}[0-9]{1,2}$/;
if (!reg.test(value)){
ReturnError("无效的日期格式");
}
break;
case "float":
var reg = /^[0-9]{0,10}[.]{0,1}[0-9]{0,4}$/;
if (!reg.test(value)){
ReturnError("无效的数字格式");
}
break;
case "email":
var reg = /^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$/;
if (!reg.test(value)){
ReturnError("无效的email格式");
}
break;
}
}
function ReturnError(sMsg)
{
var oEvent = createEventObject();
oEvent.setAttribute("error", sMsg);
error.fire(oEvent);
element.focus();
alert(sMsg);
}
</script>
Mask.css
.clsInput
{
border: #999999 1px solid;
background-color:#f5f5f1;
font: 12px 宋体;
width:95%;
BEHAVIOR: url(Mask.htc);
}
.clsInputMouseOver
{
border: #000000 1px solid;
background-color:#fffff1;
font: 12px 宋体;
width:95%;
BEHAVIOR: url(Mask.htc);
}
.clsDateView
{
border: #999999 1px solid;
font-size: 12px;
background-color: #FFFFCC;
TEXT-ALIGN: center;
POSITION: absolute;
left:auto;
top:auto;
width:200;
}
.clsDateViewHeader
{
border:1px solid #3399FF; background-color: #990000; color:#FFFFCC
}
.clsDateViewWeek
{
background-color: #FFCC66;color:#663399
}
.clsDateViewDay
{
background-color: #FFFFCC;
}
.clsDateViewDayOver
{
background-color: #FFCC66;
}
Test.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<LINK href="Mask.css" type="text/css" rel="Stylesheet">
</head>
<body>
<input type="text" class="clsinput" preset="date">
<input type="text" class="clsinput" preset="float">
<input type="text" class="clsinput" >
</body>
</html>
图例演示
不知为什么不能上传图片了？？
