asp.net中调用javascript函数实现多功能日期控件示例,,CIO之家

asp.net中调用javascript函数实现多功能日期控件示例

佚名　　http://it.13520.org　　综合　　编辑:dezai　　图片来源:网络

postbody> 今天在网上看到一个功能非常强大的日期控件,但是人家需要money.在以前搞asp的时候曾经用过一个调用js的日期控件,所以就拿到asp.net中

今天在网上看到一个功能非常强大的日期控件,但是人家需要money.在以前搞asp的时候曾经用过一个调用js的日期控件,所以就拿到asp.net中,来发挥他的作用,让它做个免费的,功能强大的日期控件.(可以拖动)

首先看看在asp.net中是如何实现调用js函数的.

demo:

这下你明白拉吧,其实当你onClick这个buttond 时候,他就return js中的valSubmit()函数.

就这么简单(这样你就可以在页面中添加个删除确认按钮就没问题拉.)

接下来就是把哪个

function valSubmit() { alert("hello ! overred")}

用哪个日期的js代码替换下来.

';
strFrame+=' ';
strFrame+='

';
var n=0; for (j=0;j<5;j++){ strFrame+= ' '; for (i=0;i<7;i++){
strFrame+='';n++;}
strFrame+='';}
strFrame+='      ';
for (i=35;i<39;i++)strFrame+='';
strFrame+='        ';
strFrame+='


	strFrame+=' Author=meizz title="' + _VersionInfo + '">关闭

';
strFrame+=' ';
strFrame+=' ';
strFrame+='

strFrame+=' onfocus="this.blur()" style="font-size: 12px; height: 20px">strFrame+=' value="< " onclick="parent.meizzPrevM()" onfocus="this.blur()" style="font-size: 12px; height: 20px">

strFrame+=' Author=meizz align=center>strFrame+=' onfocus="this.blur()" title="当前日期" style="font-size: 12px; height: 20px; cursor:hand">

strFrame+=' Author=meizz align=right>strFrame+=' onfocus="this.blur()" title="向后翻 1 月" class=button style="font-size: 12px; height: 20px">strFrame+=' Author=meizz type=button class=button value=">>" title="向后翻 1 年" onclick="parent.meizzNextY()"';
strFrame+=' onfocus="this.blur()" style="font-size: 12px; height: 20px">

window.frames.meizzDateLayer.document.writeln(strFrame);
window.frames.meizzDateLayer.document.close(); //解决ie进度条不结束的问题

//==================================================== WEB 页面显示部分 ======================================================

var outObject;
var outButton;  //点击的按钮
var outDate="";  //存放对象的日期
var odatelayer=window.frames.meizzDateLayer.document.all;  //存放日历对象
function setday(tt,obj) //主调函数
{
if (arguments.length > 2){alert("对不起！传入本控件的参数太多！");return;}
if (arguments.length == 0){alert("对不起！您没有传回本控件任何参数！");return;}
var dads = document.all.meizzDateLayer.style;
var th = tt;
var ttop = tt.offsetTop;     //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft;    //TT控件的定位点宽
var ttyp = tt.type;          //TT控件的类型
while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;
dads.left = tleft;
outObject = (arguments.length == 1) ? th : obj;
outButton = (arguments.length == 1) ? null : th; //设定外部点击的按钮
//根据当前输入框的日期显示日历的年月
var reg = /^(\\d+)-(\\d{1,2})-(\\d{1,2})$/;
var r = outObject.value.match(reg);
if(r!=null){
  r[2]=r[2]-1;
  var d= new Date(r[1], r[2],r[3]);
  if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3]){
   outDate=d;  //保存外部传入的日期
  }
  else outDate="";
   meizzSetDay(r[1],r[2]+1);
}
else{
  outDate="";
  meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
}
dads.display = '';

event.returnValue=false;
}

var MonHead = new Array(12);         //定义阳历中每个月的最大天数
    MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;
    MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var meizzTheYear=new Date().getFullYear(); //定义年的变量的初始值
var meizzTheMonth=new Date().getMonth()+1; //定义月的变量的初始值
var meizzWDay=new Array(39); //定义写日期的数组

function document.onclick() //任意点击时关闭该控件 //ie6的情况可以由下面的切换焦点处理代替
{
with(window.event)
{ if (srcElement.getAttribute("Author")==null && srcElement != outObject && srcElement != outButton)
closeLayer();
}
}

function document.onkeyup()  //按Esc键关闭，切换焦点关闭
{
    if (window.event.keyCode==27){
  if(outObject)outObject.blur();
  closeLayer();
}
else if(document.activeElement)
  if(document.activeElement.getAttribute("Author")==null && document.activeElement != outObject && document.activeElement != outButton)
  {
   closeLayer();
  }
}

function meizzWriteHead(yy,mm) //往 head 中写入当前的年与月
{
odatelayer.meizzYearHead.innerText = yy + " 年";
odatelayer.meizzMonthHead.innerText = mm + " 月";
}

function tmpSelectMonthInnerHTML(strMonth) //月份的下拉框
{
if (strMonth.match(/\\D/)!=null){alert("月份输入参数不是数字！");return;}
var m = (strMonth) ? strMonth : new Date().getMonth() + 1;
var s = "";
odatelayer.tmpSelectMonthLayer.style.display="";
odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;
odatelayer.tmpSelectMonth.focus();
}

function closeLayer() //这个层的关闭
{
document.all.meizzDateLayer.style.display="none";
}

function IsPinYear(year) //判断是否闰平年
{
if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
}

function GetMonthCount(year,month) //闰年二月为29天
{
var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
}

function GetDOW(day,month,year) //求某天的星期几
{
var dt=new Date(year,month-1,day).getDay()/7; return dt;
}

// -->

也许你喜欢代码隐藏的方式，可以这样

aspx：

<%@ Page language="c#" Codebehind="js.aspx.cs" AutoEventWireup="false" Inherits="WebApplication2.test.js" %>
<%@ Register TagPrefix="csl" Namespace="Chive.Web.UI" Assembly="Chive.Web.UI.Calendar" %>

  js



  http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

.cs

private void Button1_Click(object sender, System.EventArgs e)
  {
   Button1.Attributes.Add("onmouseover","return setdays();");
  }

搞定拉，就是这么简单，但是功能很强大．

本文作者:佚名来源:http://it.13520.org
CIO之家 www.ciozj.com 微信公众号:imciow

免责声明:本站转载此文章旨在分享信息，不代表对其内容的完全认同。文章来源已尽可能注明，若涉及版权问题，请及时与我们联系，我们将积极配合处理。同时，我们无法对文章内容的真实性、准确性及完整性进行完全保证，对于因文章内容而产生的任何后果，本账号不承担法律责任。转载仅出于传播目的，读者应自行对内容进行核实与判断。请谨慎参考文章信息，一切责任由读者自行承担。