(急用急给分100)日期

[tutuaction]

我要用户可以通过浏览器来选择日期，包括年/月/日数据
有没有现成的非asp服务端的纯html+javascript/vbscript写的控件，美观一点，就像.net中的日期选择控件一样

[baikaishui_0825]

我有，是javascript写的

[baikaishui_0825]

//日历
var date_start,date_end,g_object
var today = new Date();
var separator="-";
var inover=false;

//mode :时间变换的类型0-年 1-月 2-直接选择月
function change_date(temp,mode)
{
var t_month,t_year
if (mode){
if(mode==1)
t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
else
t_month=parseInt(temp)
if (t_month<cele_date_month.options(0).text) {
cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
change_date(parseInt(cele_date_year.value,10)-1,0);
}
else{
if (t_month>cele_date_month.options(cele_date_month.length-1).text){
cele_date_month.value=cele_date_month.options(0).text;
change_date(parseInt(cele_date_year.value,10)+1,0);
}
else
{cele_date_month.value=t_month;
set_cele_date(cele_date_year.value,cele_date_month.value);
}
}
}
else{
t_year=parseInt(temp,10);

if (t_year<cele_date_year.options(0).text) {
cele_date_year.value=cele_date_year.options(0).text;
set_cele_date(cele_date_year.value,1);
}
else{
if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10)){
cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
set_cele_date(cele_date_year.value,12);
}
else
{cele_date_year.value=t_year;
set_cele_date(cele_date_year.value,cele_date_month.value);
}
}
}

window.cele_date.focus();

}

//初始化日历
function init(d_start,d_end)
{
var temp_str;
var i=0
var j=0
date_start=new Date()
date_end=new Date()
date_start_year=date_start.getYear()
date_end_year=date_end.getYear()+2
//date_end=new Date(2004,8,1)
document.writeln("<div name=\"cele_date\" id=\"cele_date\" style=\"display:none\" style=\"LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99\" onClick=\"event.cancelBubble=true;\" onBlur=\"hilayer()\" onMouseout=\"lostlayerfocus()\">-</div>");

window.cele_date.innerHTML="";
temp_str="<table border=\"1\" bgcolor=\"#DDDDDD\" bordercolor=\"white\"><tr><td colspan=7 onmouseover=\"overcolor(this)\">";
temp_str+="<input type=\"Button\" value=\"<<\" onclick=\"change_date(-1,1)\" onmouseover=\"getlayerfocus()\" style=\"color: #000099; background-color: #BFBFBF; cursor: hand\">-";

temp_str+=""
temp_str+="<select name=\"cele_date_year\" id=\"cele_date_year\" language=\"javascript\" onchange=\"change_date(this.value,0)\" onmouseover=\"getlayerfocus()\" onblur=\"getlayerfocus()\" style=\"font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB\">"

for (i=date_start_year;i<=date_end_year;i++)
{
temp_str+="<OPTION value=\""+i.toString()+"\">"+i.toString()+"</OPTION>";
}
temp_str+="</select>-";
temp_str+=""
temp_str+="<select name=\"cele_date_month\" id=\"cele_date_month\" language=\"javascript\" onchange=\"change_date(this.value,2)\" onmouseover=\"getlayerfocus()\" onblur=\"getlayerfocus()\" style=\"font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB\">"

for (i=1;i<=12;i++)
{
temp_str+="<OPTION value=\""+i.toString()+"\">"+i.toString()+"</OPTION>";
}
temp_str+="</select>-";
temp_str+=""
temp_str+="<input type=\"Button\" value=\">>\" onclick=\"change_date(1,1)\" onmouseover=\"getlayerfocus()\" style=\"color: #000099; background-color: #BFBFBF; cursor: hand\">";

temp_str+="</td></tr><tr><td onmouseover=\"overcolor(this)\">"
temp_str+="<font color=red>日</font></td><td>";temp_str+="一</td><td>"; temp_str+="二</td><td>"; temp_str+="三</td><td>"
temp_str+="四</td><td>";temp_str+="五</td><td>"; temp_str+="六</td></tr>";
for (i=1 ;i<=6 ;i++)
{
temp_str+="<tr>";
for(j=1;j<=7;j++){
temp_str+="<td name=\"c"+i+"_"+j+"\"id=\"c"+i+"_"+j+"\" style=\"CURSOR: hand\" style=\"COLOR:#000000\" language=\"javascript\" onmouseover=\"overcolor(this)\" onmouseout=\"outcolor(this)\" onclick=\"td_click(this)\">?</td>"
}
temp_str+="</tr>"
}
temp_str+="</td></tr></table>";
window.cele_date.innerHTML=temp_str;
}
function set_cele_date(year,month)
{
var i,j,p,k
var nd=new Date(year,month-1,1);
event.cancelBubble=true;
cele_date_year.value=year;
cele_date_month.value=month;
k=nd.getDay()-1
var temp;
for (i=1;i<=6;i++)
for(j=1;j<=7;j++)
{
eval("c"+i+"_"+j+".innerHTML=\"\"");
eval("c"+i+"_"+j+".bgColor=\"#DDDDDD\"");
eval("c"+i+"_"+j+".style.cursor=\"hand\"");
}
while(month-1==nd.getMonth())
{ j=(nd.getDay() +1);
p=parseInt((nd.getDate()+k) / 7)+1;
eval("c"+p+"_"+j+".innerHTML="+"\""+nd.getDate()+"\"");
if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear())){
eval("c"+p+"_"+j+".bgColor=\"#EFFB64\"");
}
if (nd>date_end || nd<date_start)
{
eval("c"+p+"_"+j+".bgColor=\"#FF9999\"");
eval("c"+p+"_"+j+".style.cursor=\"text\"");
}
nd=new Date(nd.valueOf() + 86400000)
}
}

//s_object：点击的对象；d_start-d_end有效的时间区段；需要存放值的控件；

[baikaishui_0825]

function show_cele_date(eP,d_start,d_end,t_object)
{
window.cele_date.style.display="";
window.cele_date.style.zIndex=99
var s,cur_d
var eT = eP.offsetTop;
var eH = eP.offsetHeight+eT;
var dH = window.cele_date.style.pixelHeight;
var sT = document.body.scrollTop;
var sL = document.body.scrollLeft;
event.cancelBubble=true;
window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5;
window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
if (d_start!=""){
if (d_start=="today"){
date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
}else{
s=d_start.split(separator);
date_start=new Date(s[0],s[1]-1,s[2]);
}
}else{
date_start=new Date(1900,1,1);
}

if (d_end!=""){
s=d_end.split(separator);
date_end=new Date(s[0],s[1]-1,s[2]);
}else{
date_end=new Date(3000,1,1);
}

g_object=t_object

cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";

window.cele_date.focus();

}
function td_click(t_object)
{
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 )
{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
if (parseInt(month)<10) month = "0" + month;
if (parseInt(day)<10) day = "0" + day;

g_object.value=year+separator+month+separator+day;
window.cele_date.style.display="none";};
}

}
function h_cele_date()
{
window.cele_date.style.display="none";
}

function overcolor(obj)
{
if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";

inover=true;
window.cele_date.focus();

}

function outcolor(obj)
{
obj.style.color = "#000000";
inover=false;

}

function getNow(o){
var Stamp=new Date();
var year = Stamp.getYear();
var month = Stamp.getMonth()+1;
var day = Stamp.getDate();
if(month<10){
month="0"+month;
}
if(day<10){
day="0"+day;
}
o.value=year+separator+month+separator+day;
}

function hilayer()
{
if (inover==false)
{
var lay=document.all.cele_date;
lay.style.display="none";
}
}
function getlayerfocus()
{
inover=true;
}
function lostlayerfocus()
{
inover=false;
}
init();
//日历结束

[tutuaction]

怎么调用？

[davs]

好东西，给个说明就是更加好啦

[baikaishui_0825]

把上面的文件包含进去，直接这样调用就行了
<input name=Start_time size=30 maxlength=30 value="<%=start_time%>" onFocus="show_cele_date(Start_time,'','',Start_time)">

[meizz]

http://www.meizz.com/web/download/Web_Calendar_30.rar

[zlj113]

在你的页面中加入一句：
<script src="pickDate.js" ></script>

<input name="txtbegin" type="text" id="txtbegin2" onFocus="pickDate(this)" value="<%=datevalue(now())%>" size="12" />



pickDate.js文件为：

/**
* v 1.2.1
* 纠正了onclick事件对整体的影响，
* 同时纠正了页面滚动时引起的layer错位
* 使得弹出的layer能够遮住select对象。
* 修复了对于形如"1999-02-11asdf"这样的日期类型的识别错误
*
* 本javascript脚本用于日历式的日期输入
* 方法是：先用一个<script>标记连接此脚本，再用如下的页面代码连接：
* <input name=birth value="聚焦选择日期" onfocus="pickDate(this)">
* 在页面上可以对多个<input>标记进行日期选择，这些<input>标记可以在<form>标记内，也可以不在；
* 而且，标记的名称可有可无，重名也可，也就是说，不作任何限制。
* 具体使用请参照 pickDate.js.htm 示范页面。
*
* 本脚本中使用了下列全局javascript变量或函数名：
* spanPickDate、spanPickDate_year、spanPickDate_month、spanPickDate_currentInput、
* pickDate()、pickDate_listDays()
* 因此调用本脚本的页面最好避免使用上面列出的javascript变量或函数名称。
*/

//先做好一个层：
document.write("<span id=spanPickDate style='position:absolute; display:none;z-index:4;'><iframe id='ifmPickDate' frameborder='no' width=134 height=161 ></iframe></span>");

ifmPickDate.document.write(
"<body leftMargin=0 rightMargin=0 topMargin=0 bottomMargin=0 bgColor='lightyellow' SCROLL='no'>"+
"<table id=innerTable style='font-size:9pt' cellspacing=0 cellpadding=1 border=0>"+
"<tr>"+
"<td align=center>"+
"<a style='cursor:hand; color:blue' onclick='spanPickDate_year.innerText--;return'><<</a>"+
"<a id=spanPickDate_year style='color:red' onpropertychange='window.parent.pickDate_listDays(innerText,spanPickDate_month.innerText)'>2000</a>"+
"<a style='cursor:hand; color:blue' onclick='spanPickDate_year.innerText++'>>></a> 年 "+
"<a style='cursor:hand; color:blue' onclick='if(nextSibling.innerText>1)nextSibling.innerText--'><<</a>"+
"<a id=spanPickDate_month style='color:red' onpropertychange='if(innerText.length<2)innerText="0"+innerText; else window.parent.pickDate_listDays(spanPickDate_year.innerText,innerText)'>02</a>"+
"<a style='cursor:hand; color:blue' onclick='if(previousSibling.innerText<12)previousSibling.innerText++'>>></a> 月 "+
"</td>"+
"</tr>"+
"<tr>"+
"<td>"+
"<span id=spanPickDate_days></span>"+
"</td>"+
"</tr>"+
"</table>"+
"</body>"
);


ifmPickDate.document.close();

var spanPickDate_currentInput = null;

function hidePickDateLayer()
{
var x = window.event.x;
var y = window.event.y;
var rc = spanPickDate.getBoundingClientRect();
if(x < rc.left || x > rc.right || y < rc.top || y > rc.bottom)
spanPickDate.style.display='none'
}

function pickDate(input)
{
if(typeof(input) == 'undefined' || input == null)
{
alert("非法的标记："+input);
return;
}
var dt = input.value;
//取默认选中的时间：如果输入框已有日期，取该日期，否则取当前日期
var matchResult=dt.match(/(\d{4,4})-(\d{2,2})-(\d{2,2})/);
if(matchResult)
{
if(matchResult[2]>0&&matchResult[2]<13&&matchResult[3]>0&&matchResult[3]<32)
{
dt = new Date(matchResult[1],matchResult[2]-1,matchResult[3]);
}else{
dt=new Date();
}
} else {
dt = new Date();
}
var rc = input.getBoundingClientRect();
spanPickDate.style.left = rc.left+document.body.scrollLeft;
spanPickDate.style.top = rc.bottom+document.body.scrollTop;

input.attachEvent("onblur",hidePickDateLayer);

spanPickDate.style.display = '';
spanPickDate_currentInput = input;
ifmPickDate.document.all.spanPickDate_year.innerText = dt.getFullYear();
ifmPickDate.document.all.spanPickDate_month.innerText = dt.getMonth()+1;
}
function pickDate_listDays(year,month)
{
var days = "<table width=100% style='font-size:9pt'><tr><td style='color:red'>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td style='color:red'>六</td></tr>";

//在此将每天的链接生成：
var day = new Date(year,month-1,1).getDay();
days += "\n<tr>";
for(var i = 0; i < day; i++) days += "<td></td>";

var daysOfMonth = 31;
if(month == 4 || month == 6 || month == 9 || month == 11) daysOfMonth = 30;
if(month == 2) {
if(year % 4 != 0 || year % 100 == 0 && year % 400 != 0) daysOfMonth = 28; //非闰年？
else daysOfMonth = 29;
}

for(var i = 1; i <= daysOfMonth; i++) {
days += "<td style='cursor:hand' onclick='window.parent.spanPickDate_currentInput.value = spanPickDate_year.innerText+"-"+spanPickDate_month.innerText+"-"+innerText; window.parent.spanPickDate.style.display="none"'"
+" style='color:"+(day == 0 || day == 6 ? "red" : "green")+"'>"+(i < 10 ? "0" : "")+i+"</td>";

if(++day == 7) {
days += "</tr>\n</tr>";
day = 0;
}
}
days += "</tr></table>";
ifmPickDate.spanPickDate_days.innerHTML = days;
}

[tatty_bad]

有朋友给你了,我就不贴啦...
如果还搞不定,跟我说阿.

[LYSSHE]

好多东东哦。
up 了。

[gu1dai]

shoucang
收藏。

[tutuaction]

谢谢

[oklhj]

OKOK