自己动手做一个日期选择控件(自定义控件)

ASP.NET自带的日期控件可能有很多朋友用着觉得不太方便，我们可以自己动手写一个，当然主要 还是JS完成，为了让开发时使用更方便，在此将它封装成自定义控件，效果如图：

关于这个控件有些部分还没有完成，以前写的，现在懒得写了，如果有兴趣的朋友可以改进一下。

步骤：

1）新建一个C#项目，选择自定义控件库。

2） 将SelDate.Cs添加到项目中

3）将其他的.js,.css.gif文件添加到Resource目录中，编辑生成DLL。

4）使用控件，在工具箱的某个选项卡中右键->选择项，选择生成的DLL，这个控件的图标就会出现在工具箱中。如图：

5）将控件拖到页面中

关于控件的使用，提供了几个属性：

CssClass是指那个TextBox的样式

ImageCssClass 图片的样式

ImageUrl图片地址，日历图标的地址，默认可以不用写。

NotNull 是否必填日期。

sDate 当前选中的日期，String型。

sTodayImageUrl 这是当日图标的地址，不填用默认就可。

UseDefaultStyle 是否使用默认样式，如果为False，控件不加载默认css文件，需要用户在页面，链接一个样式表。样式的名称，可参考生成的HTML代码。

以下是我的使用代码：

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " WebForm1.aspx.cs "  Inherits = " Test.WebForm1 "   %>

<% @ Register Assembly = " ZFControls "  Namespace = " ZFControls "  TagPrefix = " cc1 "   %>

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 无标题页 </ title >
     < style >
        .txt
         {
            border : solid 1px gray ;
             font-size : 12px ;
         }
        input 
         {
            font-size : 12px ;
         }
        td {
            font-size : 12px ;
         }
        body
         {
            font-size : 12px ;
            
         }
     </ style >
</ head >
< body  >
< Form  id ="form1"  runat ="server" >
     < cc1:SelDate  ID ="SelDate1"       SelectType ="TimeOnly"          UseDefaultStyle  =""          Cssclass ="txt"   runat ="server"   />
     < cc1:SelDate  ID ="SelDate2"     Cssclass ="txt"   runat ="server"   />
     < cc1:SelDate  ID ="SelDate3"     Cssclass ="txt"   runat ="server"   />
          
  </ Form >

 

</ body >
</ html >
 
 
  < script  type ="text/javascript" >
 
function  getCookie(name) // 取cookies函数        
{
    alert(document.cookie);
     var  arr  =  document.cookie.match( new  RegExp( " (^| ) " + name + " =([^;]*)(;|$) " ));
      if (arr  !=   null )  return  unescape(arr[ 2 ]);  return   null ;

}
  </ script >

 

以下是控件源码及资源文件

主程序：SelDate.Cs

using  System;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.ComponentModel;
using  System.Drawing;
using  System.Web.UI.HtmlControls;
namespace  ZFControls
{
     ///   <summary>
     ///  SelDate 的摘要说明。
     ///   </summary>
    [DefaultProperty( " Text " ), 
    ToolboxData( " <{0}:SelDate runat=server></{0}:SelDate> " ),
    ToolboxBitmap( typeof (System.Web.UI.WebControls.Calendar))
    ]
     public   class  SelDate : System.Web.UI.WebControls.WebControl
    {
         
         private  TextBox txtInput;
         ///   <summary>
         ///  
         ///   </summary>
        [Bindable( true ), 
        Category( " Appearance " ), 
        DefaultValue( "" )] 
    
         public   string  sDate 
        {
             get
            {
                 if (CCConvert.IsDateTime( this .txtInput.Text))
                {
                     return   this .txtInput.Text;
                } else   return  String.Empty;
            }

             set
            {
                 if (CCConvert.IsDateTime(value))
                {
                     this .txtInput.Text  =  value;
                }
            }
        }

         ///   <summary>
         ///  控件右侧图标地址
         ///   </summary>
        [Bindable( true ), Category( " Appearence " ), DefaultValue( "" ), Editor( typeof (System.Web.UI.Design.ImageUrlEditor),  typeof (System.Drawing.Design.UITypeEditor))]   
         public   string  ImageUrl 
        {
             get
            {
                 return  ViewState[ " ImageUrl " ]  !=   null ? ( string )ViewState[ " ImageUrl " ]:String.Empty;
            }

             set
            {
                ViewState[ " ImageUrl " ]     =     value;
            }
        }

         ///   <summary>
         ///  控件右侧图标地址
         ///   </summary>
         public   bool  NotNull 
        {
             get
            {
                 return  ViewState[ " NotNull " ]  !=   null ? ( bool )ViewState[ " NotNull " ]: false ;
            }

             set
            {
                ViewState[ " NotNull " ]     =     value;
            }
        }

         ///   <summary>
         ///  控件右侧图标地址
         ///   </summary>
         public   string  ImageCssClass 
        {
             get
            {
                 return  ViewState[ " ImageCssClass " ]  !=   null ? ( string )ViewState[ " ImageCssClass " ]: " calimg " ;
            }

             set
            {
                ViewState[ " ImageCssClass " ]     =     value;
            }
        }

         ///   <summary>
         ///  控件右侧图标地址
         ///   </summary>
         public  SelectDateType SelectType 
        {
             get
            {
                 return  ViewState[ " SelectType " ]  !=   null ? (SelectDateType)ViewState[ " SelectType " ]:SelectDateType.DateOnly;
            }

             set
            {
                ViewState[ " SelectType " ]     =     value;
            }
        }

         ///