`

点击文本框弹出日期

阅读更多

JS文件(birthday.js): 

// JavaScript Document
//
日历
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(1980,7,1)
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=1900;i<=2020;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)
}

}

//
分享到:
评论

相关推荐

    js点击文本框弹出日期控件

    点击文本框弹出日期控件,在客户端执行,纯js和html写的,大家试试,多提宝贵意见

    原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    为了实现点击文本框弹出日期时间选择器,我们需要监听文本框的"click"事件。在HTML中,我们可以设置一个输入元素为文本框,并为其添加一个ID以便于在JavaScript中引用: ```html 选择日期时间"&gt; ``` 然后在...

    原生js实现的日期时间插件鼠标点击文本框弹出日期时间表格选择日期效果源码.zip

    在JavaScript中,可以使用`addEventListener`方法来监听这些事件,例如"click"事件,当该事件发生时,弹出日期时间选择器。 3. **动态创建元素**:为了显示日期时间选择器,插件需要在页面上动态创建HTML元素,如...

    JS轻松实现单击文本框弹出选择日期

    以上就是使用JavaScript实现单击文本框弹出日期选择器的基本步骤。通过结合HTML、CSS和JavaScript,我们可以创建出交互性良好的前端界面,提升用户的操作体验。无论选择哪种方式,关键在于理解JavaScript事件处理和...

    点击text文本框弹出日期选择器.zip

    本话题主要围绕"点击text文本框弹出日期选择器"这一功能展开,它利用原生JavaScript实现,提供了一种高效且直观的用户交互方式。 首先,我们需要理解这个功能的基本工作原理。当用户点击一个预设的text文本框时,...

    点击text文本框弹出日期选择器

    "点击text文本框弹出日期选择器"是一个常见的需求,它提高了用户输入日期的便捷性和准确性。这一功能通常借助JavaScript库如jQuery实现,因为jQuery提供了丰富的DOM操作和事件处理功能,使得开发者能够轻松创建这种...

    jquery日期日历插件 单击文本框弹出日期选择控件

    标题中的"jquery日期日历插件 单击文本框弹出日期选择控件"就是这样一个功能,它允许用户在文本框中输入日期时,点击文本框会弹出一个日历,用户可以直观地从日历上选取日期。 描述中提到的"实用的日历效果,兼容性...

    点击文本框中按钮弹出日期

    点击文本框中按钮弹出日期 ; float:left;"&gt;&lt;input name="text" type="text" class="Input" id=showdate /&gt;&lt;/div&gt;; margin-top:4px; width:20px; float:left; z-index:1000;"&gt; ('caltable').style.display='';" value...

    点击文本框弹出日历的jquery代码和使用方法

    在网页设计中,为了提升用户体验,常常需要在用户点击文本框时弹出日历插件,帮助用户方便快捷地选择日期。...在这个案例中,我们利用jQuery的便利性,实现了点击文本框弹出日历的功能,提升了用户输入日期的体验。

    单击文本框弹出日期选择控件

    在ASP.NET开发中,我们经常需要为用户提供便捷的输入日期的方式,这时“单击文本框弹出日期选择控件”的功能就显得尤为重要。这个功能可以让用户通过点击一个文本框,而不是手动输入日期,来选择一个日期,提高了...

    点击文本框弹出日历控件(可以选择日期)

    在网页设计中,为了提供用户友好的交互体验,经常需要使用到各种控件,其中“点击文本框弹出日历控件”是一个常见的功能。这个功能允许用户通过点击文本框来选择日期,而不是手动输入,既提高了数据输入的准确性,也...

    10几种js常用日历挂件【直接展示+点击文本框弹出】

    "10几种js常用日历挂件【直接展示+点击文本框弹出】"的主题涵盖了两种主要的日历挂件显示方式:直接展示和点击文本框弹出。 1. **直接展示日历挂件**: 这种类型的日历挂件会直接在页面上显示一个完整的日历视图,...

    javaScript实现点击文本框text弹出日期选择控件源码.zip

    在这个特定的案例中,"javaScript实现点击文本框text弹出日期选择控件源码.zip"是一个包含源代码的压缩包,其目标是提供一个功能,即当用户点击文本框时,会弹出一个日期选择器,帮助用户方便地输入日期。...

    网页模板——javaScript实现点击文本框text弹出日期选择控件源码.zip

    总之,"网页模板——javaScript实现点击文本框text弹出日期选择控件源码"涉及到的关键知识点包括:JavaScript事件处理、DOM操作、动态创建和销毁元素、以及可能的CSS样式设计。通过这个案例,我们可以学习如何用...

    JavaScript中如何实现点击文本框出现时间

    在JavaScript中实现点击文本框(input type="text")出现时间的功能,通常涉及到事件监听、日期和时间处理以及用户交互设计。以下是一个详尽的步骤和相关知识点解析: 1. **事件监听**: - JavaScript提供了`...

    弹出框控件日期输入框控件单击文本框自动弹出的代码

    接下来,我们需要在JavaScript中监听文本框的点击事件,当用户点击文本框时弹出日期选择器。我们可以使用`addEventListener`方法来添加事件监听器: ```javascript document.getElementById('dateInput')....

    jquery.datePicker日期选择器text文本框弹出日历

    `jquery.datePicker`提供了一个简洁、易用的界面,用户只需点击文本框,就能弹出一个日历视图,从中选择所需的日期。这个插件通常与HTML的`&lt;input&gt;`元素配合使用,将`type`属性设置为`text`,然后通过CSS和...

    点击text文本框弹出日期选择器特效代码

    "点击text文本框弹出日期选择器特效代码"是一个常见的需求,它提高了用户输入日期和时间的便捷性。这样的功能通常采用JavaScript实现,因为JavaScript作为客户端脚本语言,可以在用户与网页交互时实时响应。 在网页...

Global site tag (gtag.js) - Google Analytics