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

[cloudgamer]

就是一点就自动在文本框生成日期那种

[haver.G]

这个我用的还可以。。。
<!--输入框-->
<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>

<!--calendar.htm代码-->
<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>

[cloudgamer]

但showModalDialog这种有时会被浏览器阻止
有什么解决方法
我用的那个就经常被阻止

[myhwlj]

哈~是啊，我也有过这样的情况一直没有解决~

[zql2008]

去www.51js.com找一找，很多的

[Richard1979]

// 效果: www.eie-online.com/reg.asp
// email : [e-mail]

//////////////////////////////////////////////////////////////////////////////////
// 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";
}
}
}
}

[Richard1979]

太长了，贴不了，你们到我网站去下载吧。

[cloudgamer]

....

[Richard1979]

http://www.eie-online.com/reg.asp

这里有个日历控件，很不错的。

[Richard1979]

有人要我就把代码贴出来

[jokeD]

挺漂亮啊,贴一下吧~呵呵

[cloudgamer]

是用层的吗
不错哦

[clear1984]

好看