有没有比较好用漂亮一点的日历控件啊解决办法

有没有比较好用漂亮一点的日历控件啊
就是一点就自动在文本框生成日期那种

[解决办法]
这个我用的还可以。。。

<input name= "Thedate " type= "text " class= "txt " id= "Thedate " style= "cursor:hand " onClick= "javascript:showcalendar(this); " size= "6 " readonly value= " <%=thedate%> ">


<script>
function showcalendar(obj)
{
dv=window.showModalDialog( "../e2e/calendar.htm ", "44 ", "center:1;help:no;Status:no;dialogHeight:246px;dialogWidth:216px;scroll:no ")
if (dv) {if (dv== "null ") obj.value= ' ';else obj.value=dv;}
}
</script>


<style type= "text/css ">
body {
background-color: #D4D0C8;
}
.c_fieldset {
padding: 0,10,5,10;
text-align: center;
width: 180px;
}
.c_legend {
font-family: Tahoma;
font-size: 11px;
padding-bottom: 5px;
}
.c_frameborder {
border-left: 2px inset #D4D0C8;
border-top: 2px inset #D4D0C8;
border-right: 2px inset #FFFFFF;
border-bottom: 2px inset #FFFFFF;
background-color: #FFFFFF;
overflow: hidden;
font-family: "Tahoma ";
font-size: 10px;
width:160px;
height:120px;
}
.c_frameborder td {
width: 23px;
height: 16px;
font-family: "Tahoma ";
font-size: 11px;
text-align: center;
cursor: default;
}
.c_frameborder .selected {
background-color:#0A246A;
color:white;
}
.c_frameborder span {
width:12px;
height:12px;
}
.c_arrow {
width: 16px;
height: 8px;
font-family: "Webdings ";
font-size: 7px;
line-height: 2px;
padding-left: 2px;
cursor: default;
}
.c_year {
font-family: "Tahoma ";
font-size: 11px;
cursor: default;
width:55px;
height:19px;
}
.c_month {
width:75px;
height:20px;
font:11px "Tahoma ";
}
.c_dateHead {
background-color:#808080;
color:#D4D0C8;
}
</style>

<script language= "javascript ">
//Written by cloudchen, 2004/03/16
function calendar(name,fName)
{
var calendar=this
this.name = name;
this.fName = fName || "calendar ";
this.year = new Date().getFullYear();
this.month = new Date().getMonth();
this.date = new Date().getDate();
//private
this.toString = function()
{
var str = " ";
str += " <table border=\ "0\ " cellspacing=\ "3\ " cellpadding=\ "0\ " onselectstart=\ "return false\ "> ";
str += " <tr> ";
str += " <td> ";
str += this.drawMonth();
str += " </td> ";
str += " <td align=\ "right\ "> ";
str += this.drawYear();
str += " </td> ";
str += " </tr> ";
str += " <tr> ";
str += " <td colspan=\ "2\ "> ";
str += " <div class=\ "c_frameborder\ "> ";
str += " <table border=\ "0\ " cellspacing=\ "0\ " cellpadding=\ "0\ " class=\ "c_dateHead\ "> ";
str += " <tr> ";
str += " <td> 日 </td> <td> 一 </td> <td> 二 </td> <td> 三 </td> <td> 四 </td> <td> 五 </td> <td> 六 </td> ";

str += " </tr> ";
str += " </table> ";
str += this.drawDate();
str += " </div> ";
str += " </td> ";
str += " </tr> ";
str += " </table> ";
return str;
}
//private
this.drawYear = function()
{
var str = " ";
str += " <table border=\ "0\ " cellspacing=\ "0\ " cellpadding=\ "0\ "> ";
str += " <tr> ";
str += " <td> ";
str += " <input class=\ "c_year\ " maxlength=\ "4\ " value=\ " "+this.year+ "\ " name=\ " "+this.fName+ "\ " id=\ " "+this.fName+ "_year\ " readonly> ";
//DateField
str += " <input type=\ "hidden\ " name=\ " "+this.fName+ "\ " value=\ " "+this.date+ "\ " id=\ " "+this.fName+ "_date\ "> ";
str += " </td> ";
str += " <td> ";
str += " <table cellspacing=\ "2\ " cellpadding=\ "0\ " border=\ "0\ "> ";
str += " <tr> ";
str += " <td> <button class=\ "c_arrow\ " onfocus=\ "this.blur()\ " onclick=\ "event.cancelBubble=true;document.getElementById( ' "+this.fName+ "_year ').value++; "+this.name+ ".redrawDate()\ "> 5 </button> </td> ";
str += " </tr> ";
str += " <tr> ";
str += " <td> <button class=\ "c_arrow\ " onfocus=\ "this.blur()\ " onclick=\ "event.cancelBubble=true;document.getElementById( ' "+this.fName+ "_year ').value--; "+this.name+ ".redrawDate()\ "> 6 </button> </td> ";
str += " </tr> ";
str += " </table> ";
str += " </td> ";
str += " </tr> ";
str += " </table> ";
return str;
}
//priavate
this.drawMonth = function()
{
var aMonthName = [ "一 ", "二 ", "三 ", "四 ", "五 ", "六 ", "七 ", "八 ", "九 ", "十 ", "十一 ", "十二 "];
var str = " ";
str += " <select class=\ "c_month\ " name=\ " "+this.fName+ "\ " id=\ " "+this.fName+ "_month\ " onchange=\ " "+this.name+ ".redrawDate()\ "> ";
for (var i=0;i <aMonthName.length;i++) {
str += " <option value=\ " "+(i+1)+ "\ " "+(i==this.month? "selected ": " ")+ "> "+aMonthName[i]+ "月 </option> ";
}
str += " </select> ";
return str;
}
//private
this.drawDate = function()
{
var str = " ";
var fDay = new Date(this.year,this.month,1).getDay();
var fDate = 1-fDay;
var lDay = new Date(this.year,this.month+1,0).getDay();
var lDate = new Date(this.year,this.month+1,0).getDate();
str += " <table border=\ "0\ " cellspacing=\ "0\ " cellpadding=\ "0\ " id=\ " "+this.fName+ "_dateTable "+ "\ "> ";
for (var i=1,j=fDate;i <7;i++)
{
str += " <tr> ";
for (var k=0;k <7;k++)
{
str += " <td style= 'cursor:hand '> <span "+(j==this.date? " class=\ "selected\ " ": " ")+ " onclick=\ " "+this.name+ ".redrawDate(this.innerText,1)\ " onmouseover=\ "this.style.border= '1px solid #333333 '\ " onmouseout=\ "this.style.border= ' '\ " style=\ "width:15px;height:13px;padding-left:1px\ "> "+(isDate(j++))+ " </td> ";

}
str += " </tr> ";
}
str += " </table> ";
return str;

function isDate(n)
{
return (n> =1&&n <=lDate)?n: " ";
}
}
//public
this.redrawDate = function(d,type)
{
this.year = document.getElementById(this.fName+ "_year ").value;
this.month = document.getElementById(this.fName+ "_month ").value-1;
this.date = d || this.date;
var c=1
document.getElementById(this.fName+ "_year ").value = this.year;
document.getElementById(this.fName+ "_month ").selectedIndex = this.month;
document.getElementById(this.fName+ "_date ").value = this.date;
if (this.date> new Date(this.year,this.month+1,0).getDate()) this.date = new Date(this.year,this.month+1,0).getDate();
document.getElementById(this.fName+ "_dateTable ").outerHTML = this.drawDate();
if (type==1 && d) sendTo(calendar.getDate())
}
//public
this.getDate = function(delimiter)
{
if (!delimiter) delimiter = "- ";
var aValue = [this.year,(this.month+1),this.date];
return aValue.join(delimiter);
}
}

function sendTo(dvalue)
{
if (!dvalue)
{window.returnValue = " "}
else
{window.returnValue = dvalue}
window.close()
}
</script>
<html>
<head>
<title> 添加日期 </title>
</head>
</html>
<div align=center>
<table border= "0 " width= "180 ">
<tr> <td>
<fieldset class= "c_fieldset "> <legend class= "c_legend "> 日期 </legend>

<script>
var c = new calendar( "c ");
document.write(c);
</script>

</fieldset>
</td>
</tr>
<tr>
<td align= "right ">
<button onclick= "sendTo(c.getDate()) " style= "border:1px outset;font-size:12px ">
确定 </button>
 
<button onclick= "sendTo( 'null ') " style= "border:1px outset;font-size:12px ">
清除 </button>
 
<button onclick= "window.close() " style= "border:1px outset;font-size:12px ">
取消 </button>
</td>
</tr>
</table>
</div>
[解决办法]
http://www.eie-online.com/reg.asp

这里有个日历控件，很不错的。
[解决办法]
//效果: www.eie-online.com/reg.asp
//email :c1357025@yahoo.com.cn

//////////////////////////////////////////////////////////////////////////////////
// Layers
//////////////////////////////////////////////////////////////////////////////////

var layerQueue=new Array()
var layerIndex=-1

/* hides <select> and <applet> objects (for IE only) */
function hideElement( elmID, overDiv )
{
if( ie )
{
for( i = 0; i < document.getElementsByTagName( elmID ).length; i++ )
{
obj = document.getElementsByTagName( elmID )[i];
if( !obj || !obj.offsetParent )
{
continue;
}

// Find the element 's offsetTop and offsetLeft relative to the BODY tag.
objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;

while( objParent.tagName.toUpperCase() != "BODY " )
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}

objHeight = obj.offsetHeight;
objWidth = obj.offsetWidth;

if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
else if( overDiv.offsetTop > = ( objTop + objHeight ));
else if( overDiv.offsetLeft > = ( objLeft + objWidth ));
else
{
obj.style.visibility = "hidden ";
}
}
}
}

有没有比较好用漂亮一点的日历控件啊解

热点推荐