一个日期选择控件,(半原创)

微软自带的日期控件感觉不太好用,到处找,最后客户写了个JS(客户也是搞开发的),我把JS封装了一下
比较简单,不写注释了
CS代码如下

  1using System;
  2using System.Collections.Generic;
  3using System.ComponentModel;
  4using System.Text;
  5using System.Web;
  6using System.Web.UI;
  7using System.Web.UI.WebControls;
  8using System.Security.Permissions;
  9
 10[assembly: WebResource("WYN.WebControls.script_PopupCalender.js", "application/x-javascript", PerformSubstitution = true)]
 11[assembly:TagPrefix("WYN","TextBoxCalendar")]
 12namespace WYN.WebControls
 13{
 14    [ToolboxData("<{0}:TextBoxCalendar runat=server></{0}:TextBoxCalendar>")]
 15    [System.Security.Permissions.PermissionSet(System.Security.Permissions.SecurityAction.Demand, Name = "FullTrust")]
 16    public class TextBoxCalendar :TextBox
 17    {
 18
 19        [Bindable(true)]
 20        [Category("Appearance")]
 21        [DefaultValue("")]
 22        [Localizable(true)]
 23        [Description("控件选定的短日期字符串格式")]
 24        public string ShortDate
 25        {
 26            get
 27            {
 28                if (String.IsNullOrEmpty(Text))
 29                    base.Text = System.DateTime.Now.Date.ToShortDateString();
 30
 31                return base.Text;
 32            }
 33
 34            set
 35            {
 36                base.Text = value;
 37            }
 38        }
 39
 40        [Bindable(true)]
 41        [Category("Appearance")]
 42        [DefaultValue("")]
 43        [Localizable(true)]
 44        [Description("控件选定的日期")]
 45        public DateTime SelectedDate
 46        {
 47            get
 48            {
 49                if (String.IsNullOrEmpty(Text))
 50                    base.Text = System.DateTime.Now.Date.ToShortDateString();
 51
 52                return Convert.ToDateTime(base.Text);
 53            }
 54            set
 55            {
 56                base.Text = value.ToShortDateString();
 57            }
 58        }
 59
 60        [Browsable(false)]
 61        public override string Text
 62        {
 63            get
 64            {
 65                return base.Text;
 66            }
 67            set
 68            {
 69                ;
 70            }
 71        }
 72
 73        [Browsable(false)]
 74        public override TextBoxMode TextMode
 75        {
 76            get
 77            {
 78                return base.TextMode;
 79            }
 80            set
 81            {
 82                ;
 83            }
 84        }
 85
 86        [Browsable(false)]
 87        public override bool ReadOnly
 88        {
 89            get
 90            {
 91                return true;
 92            }
 93        }
 94
 95        protected override void OnLoad(EventArgs e)
 96        {
 97            // Define the resource name and type.
 98            String rsname = "WYN.WebControls.script_PopupCalender.js";
 99            Type rstype = this.GetType();
100
101            // Get a ClientScriptManager reference from the Page class.
102            ClientScriptManager cs = Page.ClientScript;
103       
104            // Register the client resource with the page.
105            cs.RegisterClientScriptResource(rstype, rsname);
106
107
108            base.OnLoad(e);
109        }
110
111        protected override void Render(HtmlTextWriter writer)
112        {
113            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "PopupCalender();");
114            base.Render(writer);
115        }
116    }
117}
118

JS文件如下

var oPopup = window.createPopup();
var oSrc;

var theDate;  
var theYear;
var theMonth;

theDate = new Date();

function PopupCalender()
{
    
    var s="<div style='background-color:#F5F5F5;310;padding:5px;'>" +
    "<table style='font-size:9pt' cellspacing='0' cellpadding='0' bgcolor='#ffffff' style='margin-top:0px' width='300'>" +
    "<tr><td><input id='b1' type='button' value='上一年' style='font-size:9pt'></td>" +
    "<td><input id='b2' type='button' value='下一年' style='font-size:9pt'></td>" +
    "<td width='60'><input name='theDate' type='text' value='' size='12' readonly style='font-size:9pt'></td>" +
    "<td><input id='b3' type='button' value='上一月' style='font-size:9pt'></td>"+
    "<td><input id='b4' type='button' value='下一月' style='font-size:9pt'></td></tr></table>" +
    "<table style='font-size:9pt' border='1' cellspacing='1' cellpadding='1' bordercolor='#cccccc' id='C' bgcolor='#ffffff' style='margin-top:0px' width='300'>" +
    "<tr style='background-color:#f0eada'>" +
    "<td height='26'><font color='red'>星期日</font></td>" +
    "<td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td><font color='blue'>星期六</font></td>" +
    "</tr></table></div>"

    oPopup.document.body.innerHTML = s;

    oPopup.document.all.b1.onclick = pyear;
    oPopup.document.all.b2.onclick = nyear;
    oPopup.document.all.b3.onclick = pmonth;
    oPopup.document.all.b4.onclick = nmonth;
    //oPopup.document.all.C.onclick=setTheDate;

    oSrc = window.event.srcElement; 
    theYear = theDate.getFullYear();
    theMonth = theDate.getMonth();

    displayC(0);
    oPopup.show(00, 24, 310, 176, oSrc);
}



function pyear()
{
    theYear--;    displayC(0);
}

function nyear()
{
    theYear++;    displayC(0);
}

function pmonth()
{
    theMonth--;    displayC(0);
}

function nmonth()
{
    theMonth++;    displayC(0);
}


function getLastDay()
{
    var lyear = theDate.getFullYear();
    var lmonth = theDate.getMonth() + 1;

    switch(lmonth)
    {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:  return 31; break;
        case 4:
        case 6:
        case 9:
        case 11:  return 30; break;
        case 2:   
            if((lyear % 4)!=0)  return 28;
            if((lyear % 100)!=0)  return 29;
            return 28;        
    }
}

function getWeekDay()
{
    var lday = theDate.getDate();
    theDate.setDate(1);
    var lweekday = theDate.getDay();
    theDate.setDate(lday);
    return lweekday;
}


function displayC(ldate)
{
    if(theMonth<0)
    {
        theMonth = 11;    theYear--;
    }

    if(theMonth>11)
    {
        theMonth = 0;    theYear++;
    }

    if(theYear<1000) theYear=1000;
    if(ldate==0) ldate = theDate.getDate();

    theDate.setDate(1);
    theDate.setYear(theYear);
    theDate.setMonth(theMonth);

    var lastday = getLastDay();
    var weekday = getWeekDay();

    if(ldate>lastday)
        theDate.setDate(lastday);
    else
        theDate.setDate(ldate);
    
    var objc = oPopup.document.all.C;
    for(var i=objc.rows.length-1;i>0;i--)
        objc.deleteRow(i);

    for(var i=0; i<42; i++)
    {
        var col = i % 7;
        var row = (i - col) / 7;
        var d = i- weekday + 1;
        //if(col == 0 && d> lastday) break;

        if(col ==0 ) { var r = objc.insertRow(); r.style.cursor= "hand"; r.style.textAlign="center"; }
        c = r.insertCell();
        if(d>0 && d<=lastday)
            c.innerText = d.toString();
        else
            c.innerText = " ";

        c.attachEvent("onclick",setTheDate);
    }

    showDay(objc, weekday);
}

function showDay(objc, weekday)
{
    var lday = theDate.getDate() + weekday - 1;
    var col = lday % 7;
    var row = (lday - col) / 7 + 1;
    objc.rows[row].cells[col].style.backgroundColor = "#999999";
    objc.rows[row].cells[col].style.color = "#ffffff";
            
    oPopup.document.all.theDate.value = theDate.getFullYear().toString() + "-" 
        + (theDate.getMonth() + 1).toString() + "-" 
        + theDate.getDate().toString();
    
}

function setTheDate(ev)
{
    var obj = ev.srcElement;
    var lday = parseInt(obj.innerText);

    if(isNaN(lday)) return;
    displayC(lday);

    oSrc.value = oPopup.document.all.theDate.value;
    oPopup.hide();
}

有一个地方要特别说明一下:
   由于不想让使用者见到JavaScript文件,不想让他们手工设JS路径,所以代码用到了2.0里的一个新东西
在Namespace上打上如下Attribt
[assembly: WebResource("WYN.WebControls.script_PopupCalender.js", "application/x-javascript", PerformSubstitution = true)]

注册JS的方法如下:

 protected override void OnLoad(EventArgs e)
        {
            // Define the resource name and type.
            String rsname = "WYN.WebControls.script_PopupCalender.js";
            Type rstype = this.GetType();

            // Get a ClientScriptManager reference from the Page class.
            ClientScriptManager cs = Page.ClientScript;
       
            // Register the client resource with the page.
            cs.RegisterClientScriptResource(rstype, rsname);


            base.OnLoad(e);
        }

然后在JS文件右击,选属性,生成操作(Build Action) 设为嵌入的资源

收工!可以用了