asp.net中的时间日期选择控件
现把自己在.net项目中经常使用的一款时间日期选择控件整理出来,希望对大家有所帮助!
首先大家来看看效果图:
(gif格式,用于选择图标)

js脚本:

var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#e8e8ea";
var gcToggle = "#ffff00";
var gcBG = "#FFFFFF";
var gcBorder ="#000000"
var gcFont ="#000000"
var BgColor = "#FFFFFF";
var previousObject = null;
var targert;
var noOtherMonth = 1;
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var gCalMode = "";
var gCalDefDate = "";
var CAL_MODE_NOBLANK = "2";
function fSetDate(iYear, iMonth, iDay){
//VicPopCal.style.visibility = "hidden";
if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
gdCtrl.value = "";
}else{
iMonth = iMonth + 100 + "";
iMonth = iMonth.substring(1);
iDay = iDay + 100 + "";
iDay = iDay.substring(1);
gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
}
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
window.returnValue=gdCtrl.value;
target.value = gdCtrl.value;
window.close();
}
function HiddenDiv()
{
var i;
VicPopCal.style.visibility = "hidden";
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
aCell.bgColor = gcBG;
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
if (color==gcGray) {
if (noOtherMonth != 1) {
iOffset = (Victor<10)?-1:1;
iOffset = (iDay < 15 )?1:-1;
} else {
return 1;
}
}

iMonth += iOffset;
if (iMonth<1) {
iYear--;
iMonth = 12;
}else if (iMonth>12){
iYear++;
iMonth = 1;
}
}
fSetDate(iYear, iMonth, iDay);
}
function Point(iX, iY){
this.x = iX;
this.y = iY;
}
function fBuildCal(iYear, iMonth) {
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;
for (d = 0; d < 7; d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
var WeekDay = new Array("日","一","二","三","四","五","六");
var styleTD = " bgcolor='"+gcBG+"' bordercolor='"+gcBorder+"' valign='middle' align='center' height='20' style='font-size:12px; ";
var styleTD2 = "valign='middle' align='center' height='"+iCellHeight+"' style='font-size:12px; ";
with (document) {
write("<tr>");
for(i=0; i<7; i++)
write("<td "+styleTD+" color:#000000' >" + WeekDay[i] + "</td>");
write("</tr>");
for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td id=calCell "+styleTD2+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");
write("<font id=cellText ><b> </b></font>");
write("</td>")
}
write("</tr>");
}
}
}
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d]) {
Victor = i++;
if (myMonth[w+1][d]<0) {
color = gcGray;
if (noOtherMonth!=1) innerText = -myMonth[w+1][d];
else innerText = " ";
}else{
// Modified by maxiang for we need
// Saturday displayed in blue font color.
//color = ((d==0)||(d==6))?"red":"black";
if( d == 0 ){
color = "red";
}else if( d == 6 ){
color = "blue";
}else{
color = "black";
}
// End of above maxiang
innerText = myMonth[w+1][d];
}
}
}
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
fUpdateCal(iYear, iMon);
}
function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
fSetYearMon(iYear, iMon);
}
function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
fSetYearMon(iYear, iMon);
}
function fToggleTags(){
with (document.all.tags("SELECT")){
for (i=0; i<length; i++)
if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
item(i).style.visibility = "hidden";
goSelectTag[goSelectTag.length] = item(i);
}
}
}
function fTagInBound(aTag){
with (VicPopCal.style){
var l = parseInt(left);
var t = parseInt(top);
var r = l+parseInt(width);
var b = t+parseInt(height);
var ptLT = fGetXY(aTag);
return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
}
}
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}
// Main: popCtrl is the widget beyond which you want this calendar to appear;
// dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">
function fPopCalendar(popCtrl, dateCtrl,Targetctrl,mode, defDate){
gCalMode = mode;
gCalDefDate = defDate;
target = Targetctrl;
if (popCtrl == previousObject){
if (VicPopCal.style.visibility == "visible"){
//HiddenDiv();
return true;
}
}
previousObject = popCtrl;
gdCtrl = dateCtrl;
fSetYearMon(giYear, giMonth);
var point = fGetXY(popCtrl);
if( gCalMode == CAL_MODE_NOBLANK ){
document.all.CAL_B_BLANK.style.visibility = "hidden";
}else{
document.all.CAL_B_BLANK.style.visibility = "visible";
} 
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
fToggleTags(point);
visibility = 'visible';
}
}
var gMonths = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
with (document) {
write("<Div id='VicPopCal' style='OVERFLOW:hidden;POSITION:absolute;VISIBILITY:hidden;border:0px ridge;width:100%;height:100%;top:0;left:0;z-index:100;overflow:hidden'>");
write("<table bgcolor='"+BgColor+"' BORDER=3 CELLSPACING=3 CELLPADDING=%3>");
write("<TR>");
write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:bold' onClick='fPrevMonth()'>");
write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=1949;i<2020;i++)
write("<OPTION value='"+i+"'>"+i+"年</OPTION>");
write("</SELECT>");
write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <input type='button' name='PrevMonth' value='>' style='height:20;width:20;FONT:bold' onclick='fNextMonth()'>");
write("</td>");
write("</TR><TR>");
write("<td align='center'>");
write("<DIV'><table width='100%' border='1' CELLSPACING=3 CELLPADDING=%3>");
fDrawCal(giYear, giMonth, 8, '12');
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align='center'>");
write("<TABLE width='100%'><TR><TD align='center'>");
write("<font ID=\"CAL_B_BLANK\" style='color:"+gcFont+"; visibility:visible; cursor:hand; font-size:12px' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=gcFont'></font>");
write("</td><td algin='center'>");
write("<font style='color:"+gcFont+";cursor:hand; font-size:12px' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=gcFont'> 当前日期: "+giYear+"/"+giMonth+"/"+giDay+"</font>");
write("</td></tr></table>");
write("</TD></TR>");
write("</TABLE></Div>");
}html文件:

<HTML>
<HEAD>
<title>日期选择</title>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY onload="fload()">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<SCRIPT src="calendar.js"></SCRIPT>
<SCRIPT>
function fload()
{
var a = window.dialogArguments;
fPopCalendar(document.all.txt1, document.all.txt1,a);
}
function fkeydown()
{
if(event.keyCode==27){
event.returnValue = null;
window.returnValue = null;
window.close();
}
}
document.onkeydown=fkeydown;
</SCRIPT>
<INPUT id="txt1" style="DISPLAY: none">
</BODY>
</HTML>
使用实例:

<script>
function PopCalendar(obj)
{
showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX;
showy = event.screenY - event.offsetY -168; // + deltaY;
newWINwidth = 210 + 4 + 18;
window.showModalDialog("calendar.htm",obj,"dialogWidth:206px; dialogHeight:230px; dialogLeft:"+showx+"px; dialogTop:"+showy+"px; status:no; directories:yes;scrollbars:no;Resizable=no; ");
}
</script>

<TR>
<TD align="left" colSpan="2"><FONT face="宋体">
<asp:label id="Label4" runat="server" Font-Size="12px">姓名:</asp:label>
<asp:textbox id="TxtName" runat="server"></asp:textbox>
<asp:label id="Label5" runat="server" Font-Size="12px">工作单位:</asp:label>
<asp:textbox id="TxtWorkCorp" runat="server"></asp:textbox>
<asp:label id="Label8" runat="server" Font-Size="12px">入住时间:</asp:label>
<asp:textbox id="StartTime" runat="server" Width="80" CssClass="textbox"></asp:textbox>
<INPUT id="CalendarStart" onclick="PopCalendar(StartTime);return false;" tabIndex="14" type="image" src="data:images/calendar.gif" align="absMiddle">
<asp:label id="Label1" runat="server" Font-Size="12px">至</asp:label>
<asp:textbox id="EndTime" tabIndex="15" runat="server" Width="80" CssClass="textbox"></asp:textbox>
<INPUT id="CalendarEnd" onclick="PopCalendar(EndTime);return false;" tabIndex="16" type="image" src="data:images/calendar.gif" align="absMiddle">
<asp:button id="BtnSearch" runat="server" Text="查询"></asp:button><FONT face="宋体"></FONT></FONT>
</TD>
</TR>asp.net中的时间日期选择控件的更多相关文章
- ASP.NET(c#) 日期选择控件的另一种实现方法
这篇文章是在一个英文网站发现的,完全使用ASP.NET实现了日期选择的基本功能,没有使用js,原文链接http://geekswithblogs.net/plundberg/archive/2009/ ...
- 取消layUI中日期选择控件默认填充日期
input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...
- C# 中带有中国农历的日期选择控件
开源一款自己刚开始接触 C# 时开发的带有农历信息的日期选择控件,记得那时还是在2010年的寒假期间做的这个东西.刚开始接触 C# 时,使用WinForm来开发桌面程序,觉得简直是简单又迅速,由于 C ...
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- Swift - 日期选择控件(UIDatePicker)的用法
1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
- ExtJS6.0扩展日期选择控件为也可以选择时间
PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
随机推荐
- Ftp服务器配置讲解
ftp.server.ip=192.168.80.130ftp.user=ftpuserftp.pass=ftpuserftp.server.http.prefix=http://image.imoo ...
- python拼接字符串
python拼接字符串一般有以下几种方法: 1.直接通过(+)操作符拼接 s = 'Hello' + ' ' + 'World' + '!' print(s) 输出结果:Hello World! 使用 ...
- SAP GUI常用快捷键
F1:帮助 F2:双击.比如TC行的双击,LIST行的双击等 F3:后退(Back),后退按钮 Shift+F3:退出(Exit),退出按钮 F4:搜索帮助 F8:执行 F10:菜单 F12:取消(C ...
- VMware跨电脑移动Linux虚拟机
环境:VMware-Workstation-12-Pro,Windows-10,CentOS-6.9-x86_64,Xshell5 概况 vmware自带的快照,克隆功能,都可以实现备份虚拟机的功能, ...
- 手把手教你学node之搭建node.js开发环境
搭建node.js开发环境 本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...
- Python ConfigParser的使用
1.基本的读取配置文件 -read(filename) 直接读取ini文件内容 -sections() 得到所有的section,并以列表的形式返回 -options(section) 得到该sect ...
- springcloud7---hystrix
目前使用eureka server完成了服务注册和服务发现,ribbon完成了客户端负载均衡.如果服务提供者的响应很慢那么服务消费者会强制等待,一直等到http请求超时,如果服务消费者还是其他的服务提 ...
- cookie的存取删
存: document.cookie = "name=Kevin;expires="+new Date().getDate()+7; //有效期7天 取: function Get ...
- 三.野指针和free
在C语言项目中,经常会遇到需要程序员手动分配内存的地方.这样做能够节省大量的内存空间,也让程序更加灵活.只要你有一定的基础,那么肯定用过 malloc 或者 ralloc和free的组合.这个组合使用 ...
- 20145221 《Java程序设计》第七周学习总结
20145221 <Java程序设计>第七周学习总结 教材学习内容总结 第十二章部分 - Lambda 认识Lambda语法 Lambda去可以重复,符合DRY原则,而且Lambda表达式 ...