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

cpp2017 cpp2017 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.9k累计阅读 3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄24年
关注
原创 最新推荐文章于 2026-03-24 00:29:02 发布 2.9k 阅读 AI 写同款· GEO 优化 ›
【MAUI】自定义横向日期选择控件 这篇文章介绍了一个日历控件的实现方案，主要包含三个关键部分： 日期排序算法：当包含当天时，确保今天始终显示在最右侧；其他情况按正常周顺序（周一至周日）显示。 UI状态管理：包括日期选中状态（特殊背景色）、当天标记（用"今"代替数字）、过去日期（透明背景）以及事件标记（小圆点）。 交互功能：通过TapGestureRecognizer实现日期点击，并通过Command绑定到ViewModel处理逻辑。 文中提供了XAML前端布局代码和C# ViewModel中的日期处理逻辑，展示了如何动态 阅读详情

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;
            }
        }

        /// <summary>
        ///  是否使用默认的样式
        /// </summary>
        public bool UseDefaultStyle
        {
            get
            {
                return ViewState["UseDefaultStyle"] != null ? (bool)ViewState["UseDefaultStyle"] : true;
            }
            set
            {
                ViewState["UseDefaultStyle"] = value;
            }
        }

        /// <summary>
        ///  今天的图标Url地址
        /// </summary>
        [Bindable(true), Category("Appearence"), DefaultValue(""), Editor(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(System.Drawing.Design.UITypeEditor))]   
        public string sTodayImageUrl
        {
            get
            {
                return ViewState["sTodayImageUrl"] != null?(string)ViewState["sTodayImageUrl"]:String.Empty;
            }
            set
            {
                ViewState["sTodayImageUrl"]    =    value;
            }
        }

        

        /// <summary>
        /// 
        /// </summary>
        /// <param name="e"></param>
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            string sScript = " var gCalendarToDayUrl ="" +
                 this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.today.gif")
            + ""; ";
            sScript += " var gCalendarCircleFillUrl  ="" +
                 this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.circlefill.gif")
            + ""; ";
            sScript += " var gCalendarToDayFillUrl     ="" +
                this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.todayfill.gif")
           + ""; ";

            if (!this.Page.ClientScript.IsClientScriptBlockRegistered("ZfControlsCalendarDelcareJs"))
            {
                this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ZfControlsCalendarDelcareJs", sScript, true);
            }

            if (this.UseDefaultStyle && !this.Page.ClientScript.IsClientScriptBlockRegistered("ZfControlsCalendarBoxCss"))
            {
                this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ZfControlsCalendarBoxCss", "<link href="" + this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.Calendar.css") + "" rel="stylesheet" type="text/css">");
            }

            if ( !this.Page.ClientScript.IsClientScriptIncludeRegistered("ZfControlsCalendarJs"))
            {
                this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "ZfControlsCalendarJs", this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.calendar.js"));
                
            }

            string strVBSCRIPT = @"<script type=""text/vbscript"">
   function  ZfCalendar_CheckDate(ctrl,obj)
       Dim str
       str = obj.Value
       if isdate(str) then
        obj.IsValid = true
       Else
        obj.IsValid = false
        
       end if
        
     
   end function
</script>
 ";
            if (!this.Page.ClientScript.IsClientScriptBlockRegistered("ZfControlsCalendarJs"))
            {
                this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ZfControlsCalendarJs", strVBSCRIPT,false);

            }

        }
        

        /// <summary>
        /// 初始化
        /// </summary>
        /// <param name="e"></param>
        protected override void OnInit(EventArgs e)
        {
            if (this.Context != null)
            {
                if (this.sTodayImageUrl == "")
                {
                    this.sTodayImageUrl = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.today.gif");
                }
              
            }


            if (this.ImageUrl == "")
            {
                this.ImageUrl = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "ZFControls.Resource.calendar.gif");
            }
            this.txtInput = new TextBox();
            this.txtInput.ID = "txt"+this.ID ;
            this.txtInput.CssClass    =  this.CssClass;

            if (this.Width == Unit.Empty && this.SelectType == SelectDateType.DateOnly)
            {
                this.txtInput.Width = Unit.Parse("70px");
            }
            else
            {
                this.txtInput.Width = this.Width;
            }
            HtmlTable tb = new HtmlTable();
            tb.Border = 0;
            tb.CellPadding = 0;
            tb.CellSpacing = 0;
            tb.Style.Add("display", "inline");
            HtmlTableRow row = new HtmlTableRow();
            HtmlTableCell cell = new HtmlTableCell();
            row.Cells.Add(cell);
            tb.Rows.Add(row);
            
            cell.Controls.Add(this.txtInput);

            System.Web.UI.HtmlControls.HtmlImage img = new System.Web.UI.HtmlControls.HtmlImage();
            

            img.Attributes.Add("onclick","javascript:GoSelectDate(this,'"+this.ClientID+"')");
            img.Attributes.Add("class",this.ImageCssClass);
              img.Src = this.ImageUrl;

              cell = new HtmlTableCell();
            row.Cells.Add(cell);
            cell.Controls.Add(img);
            this.Controls.Add(tb);
            if(this.NotNull)
            {
                RequiredFieldValidator req = new RequiredFieldValidator();
                req.ControlToValidate = txtInput.ID;
                req.ErrorMessage = "日期不可空";
                req.Display = ValidatorDisplay.Dynamic;
                this.Controls.Add(req);
            }

            CustomValidator cu = new CustomValidator();
            cu.ControlToValidate = txtInput.ID;
            cu.ErrorMessage = "日期格式不正确";
            cu.ClientValidationFunction = "ZfCalendar_CheckDate";
            this.Controls.Add(cu);
            base.OnInit (e);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="writer"></param>
        public override void RenderBeginTag(HtmlTextWriter writer)
        {
            //base.RenderBeginTag (writer);
        }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="writer"></param>
        public override void RenderEndTag(HtmlTextWriter writer)
        {
            //base.RenderBeginTag (writer);
        }


      

        /// <summary> 
        /// 将此控件呈现给指定的输出参数。
        /// </summary>
        /// <param name="output"> 要写出到的 HTML 编写器 </param>
        protected override void Render(HtmlTextWriter output)
        {    
             
            output.Write("<span SelectType=""+ (int)this.SelectType +"">");
            base.Render(output);
            if (this.Context == null) return;
            string sHTML = @"<span   onselectstart=""javascript:return false;""   style=""display:none;position:absolute;width:200px;background-color:#d6e3f7;border:solid 1px #336699;border-bottom:solid 2px gray;border-right:solid 2px gray;padding:5px;"" onclick=""javascript:ShowCalendar(event,this,'{0}');"">
                <div  style='text-align:center'>
                    <FONT  style=""CURSOR: hand;font-weight:bold""   color=black eid=""1"">&lt;</FONT><input id='txtYear{0}'  eid=""5"" onclick=""return ""  onblur=""javascript:return ShowCalendar(event,this,'{0}');"" style=""text-align:center;border:none;width:35px;background-color:transparent;padding-bottom:2px;height:15px"" maxlength=""4"" ondblclick=""this.focus();this.style.backgroundColor='white';this.style.borderColor='#336699';this.style.borderStyle='solid';this.style.borderWidth='1'""  value=""2007"" ></input>年
                    <FONT style=""CURSOR: hand;font-weight:bold""   color=black eid=""2"">&gt;</FONT> <FONT style=""CURSOR: hand;font-weight:bold"" color=black     eid=""3"">&lt;</FONT>
                    <SPAN style=""CURSOR: default"" onclick='javascript:CalendarShowMonths(""{0}"",this)'><input id='txtMonth{0}' style=""text-align:center;border:none;width:16px;background-color:transparent;padding-bottom:2px;height:15px;cursor:default""  readonly></input>月</SPAN>
                    <FONT style=""CURSOR: hand;font-weight:bold""  color=black eid=""4"">&gt;</FONT> 
                </div>
                <div id=""divList{0}"" ></div>
            </span>";
            sHTML = String.Format(sHTML, this.ClientID);
            output.Write(sHTML);
            ;
            
            output.Write(@"<table  id=""TbCalendar"+this.ClientID+@"""  onclick=""javascript:ShowCalendar(event,this,'"+this.ClientID+@"');"" class=""tblMonths""  style=""display:none;cursor:default"" >
            <tr>
                <td value=""1"" eid=""12"">一月</td>
                <td value=""2"" eid=""12"">二月</td>
                <td value=""3"" eid=""12"">三月</td>
            </tr>
             <tr>
                <td value=""4"" eid=""12"">四月</td>
                <td value=""5"" eid=""12"">五月</td>
                <td value=""6"" eid=""12"">六月</td>
            </tr>
             <tr>
                <td value=""7"" eid=""12"">七月</td>
                <td value=""8"" eid=""12"">八月</td>
                <td value=""9"" eid=""12"">九月</td>
            </tr>
             <tr>
                <td value=""10"" eid=""12"">十月</td>
                <td value=""11"" eid=""12"">十一月</td>
                <td value=""12"" eid=""12"">十二月</td>
            </tr>
        </table>");
            output.Write("</span>");
        
        }





     
    }

    /// <summary>
    /// 控件选择日期的类型
    /// </summary>
    public enum    SelectDateType
    {
        /// <summary>
        /// 选择日期
        /// </summary>
        DateOnly    =    1,
        /// <summary>
        /// 选择日期时间
        /// </summary>
        DateTime    =    2,
        /// <summary>
        /// 只选择时间
        /// </summary>
        TimeOnly    =    3
    }
}

将js、css、gif等文件编辑到dll中，是为了使用方便，这样做理论上效率可能会差些，但实际上应该不大。

calendar.js文件：

 


    var gMaxZIndex = 1000;
    function GetElePos(e)
    {
        var t=e.offsetTop; 
         var l=e.offsetLeft; 
         while(e=e.offsetParent){ 
         t+=e.offsetTop; 
         l+=e.offsetLeft; 
         } 
         return [l, t];
    }
  
    function GoSelectDate(img,clientid)
    {
    
       
        var el  =   img.parentNode;
        var type = el.SelectType;
        
        var div = document.getElementById("divList"+clientid);
        var spanParent  =   div.parentNode;
        var txt =   document.getElementById("txt"+clientid);
     
        var value = txt.value;
         
        var dt = new Date();
        
        var y = dt.getFullYear();
        var m = dt.getMonth()+1;
        var d   = dt.getDate();
        

       
    
             
        if(value != "")
        {
            var reg = new RegExp(/^(d{4})-(d+)-(d+)$/);
            if(reg.exec(value) != null)
            {
                var a = reg.exec(value);
                y = a[1];
                m = a[2];
                d = a[3];
            } 
        }else
        {
                d= 0;
        }
        
        if(parseInt(m)<1 || parseInt(m)>12)
        {
            m = dt.getMonth()+1;
        }
        
        
        div.setAttribute("year",y);
        div.setAttribute("month",m);
        div.setAttribute("day",d);
         
        spanParent.style.cssText = "position:absolute;width:200px;height:200px;background-color:#d6e3f7;border:solid 1px #336699;border-bottom:solid 2px gray;border-right:solid 2px gray;padding:5px;";
         
        var str = GetCalendarHTML(y,m,d,clientid,y,m,d);
        SaveDivDate(div,y,m,d,clientid);
        div.innerHTML = str;
         
        var ary = GetElePos(img);
        spanParent.style.left = ary[0];
        if(ary[0]+ spanParent.offsetWidth>document.body.offsetWidth)
        {
            spanParent.style.left = document.body.offsetWidth-spanParent.offsetWidth;
            
        }
        spanParent.style.top    = ary[1]+img.offsetHeight;
        
        if(ary[1]+img.offsetHeight+ spanParent.offsetHeight > document.body.clientHeight)
        {
            spanParent.style.top = document.body.clientHeight-spanParent.offsetHeight+img.offsetHeight;
            
        }
        gMaxZIndex ++;
        spanParent.style.zIndex = gMaxZIndex;
    }
    

    function ShowCalendar(evt,evtSrc,clientid)
    {
       
       var el   =   evt.target;
       if(document.all) //ie
       {
        el  =   evt.srcElement;
       }
       var eid =    el.getAttribute("eid");
       var div =    document.getElementById("divList"+clientid);
       var txt =   document.getElementById("txt"+clientid);
        var spanParent  =   div.parentNode;
       if(eid!= null)
       {
            var sely;
            var selm;
            var seld;
            var value = txt.value;
            if(value != "")
            {
                var reg = new RegExp(/^(d{4})-(d+)-(d+)$/);
                if(reg.exec(value) != null)
                {
                    var a = reg.exec(value);
                    sely = a[1];
                    selm = a[2];
                    seld = a[3];
                } 
            }

            var y =      parseInt(div.getAttribute("year"));
            var m   =   parseInt(div.getAttribute("month"));
            var d   =   parseInt(div.getAttribute("day"));
                
         switch(eid)
         {
            case "1":case "2":case "3":case "4":case "5":
               
                if(eid == "1")
                {
                    y -= 1;
                }else if(eid == "2")
                {
                    y+= 1;
                }else   if(eid == "3")
                {
                    m -= 1;
                }else if(eid == "4")
                {
                    m += 1;
                }else if(eid == "5")
                {
                    if(isNaN(evtSrc.value))
                    {
                        return false;
                    }
                    else y = parseInt(evtSrc.value);
                    evtSrc.style.backgroundColor = "transparent";
                    evtSrc.style.borderWidth = "0";
                   
                }
                
                
                if(m==0)
                {
                    m = 12;
                    y -= 1;
                }
                if(m == 13)
                {
                    m = 1;
                    y +=1;
                }
                 
                SaveDivDate(div,y,m,d,clientid);
 
                div.innerHTML = GetCalendarHTML(y,m,d,clientid,sely,selm,seld);
                 
                break;
            case "12":
                m  = el.getAttribute("value");
                SaveDivDate(div,y,m,d,clientid);
                div.innerHTML = GetCalendarHTML(y,m,d,clientid,sely,selm,seld);
                evtSrc.style.display = "none";
                break; 
            case "365":
                str =   el.innerHTML;
                str  = str.replace(/<[^>]*?>/gi,"");
                d = parseInt(str);
                SaveDivDate(div,y,m,d,clientid);
                spanParent.style.display = "none";  
                txt.value = get2Number(y) +"-"+ get2Number(m) +"-" +get2Number(d);           
            break;
         }
        
       }
    }
    
    function SaveDivDate(div,y,m,d,clientid)
    {
        
        div.setAttribute("year",y);
        div.setAttribute("month",m);
        div.setAttribute("day",d);
        
        var txtYear= document.getElementById("txtYear"+clientid);
        var txtMonth= document.getElementById("txtMonth"+clientid);
         
        txtYear.value = y;
        txtMonth.value = m;
                
    }
   
       
        function ConvertToInt(sValue)
        {
            while (sValue.length>1 && sValue.substr(0,1) =="0")
            {
                sValue = sValue.substr(1,sValue.length-1);
            }
            if(isNaN(sValue)|| sValue =="") return 0;
            else return parseInt(sValue);
        }
        
        function CalendarShowMonths(clientid,span)
        {
            
            var tb = document.getElementById('TbCalendar'+clientid);
            
            var ary =   GetElePos(span);
            
            tb.style.position = "absolute";
            tb.style.display = '';
            tb.style.left   =  ary[0]-(tb.offsetWidth/2);
            tb.style.top    =   ary[1];
            gMaxZIndex ++; 
            tb.style.zIndex = gMaxZIndex ;
            
             
        }
        function GetCalendarHTML(year,month,CurDay,clientid,sely,selm,seld)
        {    
                var imageFolderPath = "";
                var showClearDate = false;
                year = parseInt(year);
                month = parseInt(month);
                CurDay  = parseInt(CurDay);
                var firstDayOfMonth =new Date(year,month-1,1);
                var firstWeekDay = firstDayOfMonth.getDay();
                
                var  res ="<TABLE width='100%'  border=1 cellpadding='0' cellspacing='0'  class="tblCalendarCenter">";
                     res +="<TR class='weektr'><TD style='color:red'>日</TD><TD>一</TD><TD>二</TD><TD>三</TD><TD>四</TD><TD>五</TD><TD>六</TD></TR> ";                 
                     res +="<TR>";
                for (var i=0;i<firstWeekDay;i++)
                {
                    res +="<TD  class='CalendarTd'></TD>";
                }
                
                var day =1;
                var now = new Date();
                
                for (var i=firstWeekDay;i<=6;i++,day++)
                {
                    if(i == 0)
                    {
                        tmpClass = 'SunDayTD';
                    }else
                    {
                        tmpClass = 'CalendarTd';
                    }
          
                    if(year==now.getFullYear() && month == (now.getMonth()+1) && day == now.getDate())
                    {
                        
                        var tmpurl =   gCalendarToDayUrl;
                        if(day ==CurDay)
                        {
                            tmpClass += ' selectDaySpan';
                            tmpurl = gCalendarToDayFillUrl;
                        }
                        res +="<TD eid=365   class='"+tmpClass+"' align='center'  style='font-size:12px;background-repeat:no-repeat;background-image:url("+tmpurl   +");' >";
                        res  += day;
                        res +="</TD>";
                    }
                    else
                    {
                        res +="<TD eid=365    align='center' ";
                        if(day == seld && year == sely && month == selm)
                        {
                           tmpClass += ' selectDaySpan';
                           res +="style='background-image:url("+gCalendarCircleFillUrl   +");'";
                          
                        }
                        
                        res += " class='"+tmpClass+"' >";
                        res += day     ;
                        
                        
                         res +="</TD>";
                    }
                
                }
        
            res +="</TR> ";
            
            var cellCount=0;
            var MaxDays = getMaxDayOfYearMonth(year,month);
        
            for (;day<=MaxDays;day++,cellCount++)
            {
                var tmpClass="CalendarTd";
                if(cellCount%7==0)
                {
                     res +="<TR>";
                     tmpClass="SunDayTD";
                }
                ;
                    
                if(year==now.getFullYear() && month == (now.getMonth()+1) && day == now.getDate())
                {
                      tmpClass += ' selectDaySpan';
                        var tmpurl =   gCalendarToDayUrl;
                        if(day ==CurDay)
                        {
                            tmpurl = gCalendarToDayFillUrl;
                        }
                        res +="<TD eid=365   class='"+tmpClass+"' align='center'  style='font-size:12px;background-repeat:no-repeat;background-image:url("+tmpurl   +");' >";
                        res  += day;
                        res +="</TD>";
                }
                else
                {    
                    
                    res +="<TD eid=365  align='center' ";
                    
                    if(day == seld && year == sely && month == selm)
                    {   
                        tmpClass    +=   " selectDaySpan";
                        res +="style='background-image:url("+ gCalendarCircleFillUrl +")' ";
                    }
                    res += " class='"+tmpClass+"' >";
                    res += day  ;
                     
                     res +="</TD>";
                
                }
                
                 if(cellCount %7==6)
                 {
                    res +="</TR> ";
                 }
                    
            }
            
            if(res.substr(res.length-5,5) !="</TR> ") 
            {
                var lastDay = cellCount %7;
                if(lastDay !=6)
                {
                    for (;lastDay<=6;lastDay++)
                    {
                        res +="<TD  class='CalendarTd'>&nbsp;</TD>";
                    }
                    res +="</TR> ";
                }
            }
            
            res =="</TABLE>";
             
            
            
            var d1 = new Date();
            
            res+="<table width='100%' border='0'><tr><td  align='center'><img src='"+gCalendarToDayUrl   +"'>今天:"+d1.toLocaleDateString()+ "</td></TR> ";
            res +="<tr><td align='center'><a href='#' onclick='this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";'>关闭</a>";
            if(showClearDate!="0")
            {
                res +="&nbsp;<a href='#' onclick='ClearDate(1);'>清除</a>";
            }
            
            res+="</td></TR> </table>";
                     
            //window.clipboardData.setData("text",res);
             return res;
        }
        
        
        function getMaxDayOfYearMonth(year,month)
        {
            
            if(month ==2)
            {
                if(IsChepYear(year))
                {
                    return 29;    
                }else
                    return 28;
            }else
            {
                return 30+ ((month>7) + month)%2;
            }
        }
        
        function IsChepYear(year)
        {
            if(year %4 ==0 && year % 100 !=0)
            {
                return true;
            }else if(year % 400 ==0) 
            {
                return true;
            }else return false;
        }
    
        function get2Number(num)
        {
            num = parseInt(num);
            if(num<10)
            return "0"+num;
            else return  num;
        }

calendar.css文件：

 

 
.SunDayTD
{    
    color:Red;
    border-left:solid 1px #fffff1;
    cursor:default;
}
.weektr
{
    background-color:#000080;
    height:17px;
    color:White;
    border-bottom:solid 1px #336699;
    border-top:solid 1px gray;
    text-align:center;
}
label
{
    cursor:hand;
    
}
A
{
    color:#336699;
    text-decoration:none;
}
A:hover
{
    color:Red;
    text-decoration:none;
}
.tblMonths
{
    border:solid 1px #336699;
    position:absolute;
    background-color:white;
    
}
.CalendarTd
{
    border-top:solid 1px #fffff1;
    border-left:solid 1px #fffff1;
    font-family:Arial;
    cursor:default;
    
}
.selectDaySpan
{    
    cursor:default;
    color:White;
}
.tblCalendarCenter
{
    
    border-left:none;
    border-right:none;
    border-collapse:collapse;
    border-bottom:none;
        cursor:default;
}
 

关于样式我就不多说了，随个人爱好修改。

calendar.gif    circlefill.giftoday.giftotdayfill.gif

 

收录于
ASP.Net

当前文章被收录于：

ASP.Net
3 篇文章 0 人学习
订阅专栏 查看详情
标签
#function #javascript #string #null #border
#class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
WPF自定义DatePicker实现仿HTML5日期选择控件功能 最近重写了WPF自带的DatePicker控件样式，可响应鼠标滚轮、键盘等事件修改日期，效果如图： 话不多说，直接上源码： 1、主窗体xaml： <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ... 阅读详情

相关推荐

Android日期选择控件使用指南

Android开发中，日期选择是一个常见的需求，用户需要能够方便地选择日期来完成特定操作。为了满足这个需求，Android提供了日期选择控件，通过它，我们可以轻松地实现日期的选择功能。通过添加日期选择控件，并监听日期的变化，我们可以轻松地实现日期选择功能。在布局文件中添加日期选择控件后，接下来我们需要在代码中获取用户选择的日期。首先，找到日期选择控件的实例，并注册监听器来监听日期的变化。方法找到了日期选择控件的实例，并注册了日期变化的监听器。方法找到了日期选择控件的实例，并调用。一、添加日期选择控件。

CodeSpark的博客 1099

asp.net千奇百怪的日历【月儿原创】

asp.net千奇百怪的日历作者：清清月儿 主页：http://blog.youkuaiyun.com/21aspnet/           时间：2007.5.14日历控件是我们经常使用的，本文把常用的几款日历总结如下。 1.下拉日历梅花雨版第1款点评：最经典的几乎完美了。代码：...@ Page Language="C#" AutoEventWireup="true"  

深度Java 3万+

HTML日期选择控件开发指南：从基础到高级应用

jQuery UI DatePicker 是一个基于 jQuery 和 jQuery UI 库的日期选择控件。它提供了用户友好的交互式界面，允许用户选择日期，并以标准格式输出。DatePicker 支持多种配置选项，例如日期格式化、最小和最大日期限制、前后导航按钮等，使得它不仅适用于简单的日期选择需求，而且可以应对复杂的业务场景。它也被广泛用于许多基于Web的应用中，以替代或增强原生HTML5的日期控件。DatePicker 提供了许多选项来定制其外观和行为。

weixin_35879493的博客 1070

Vue开发--ElementUI的时间控件选择(年月日时分)

Vue开发--ElementUI的时间控件选择(年月日时分)

weixin_44021888的博客 2967

iCalendar:vue的PC端日期选择器

end 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。

WebForm下日期时间选择控件

web form下日期，时间选择控件。支持多种语言，可以自定义格式，丰富的风格供选择。

自己写的asp日历控件

&lt;%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns=&qu

weixin_33695450的博客 314

非常好看的winform 自定义日期控件

非常好看的winform 自定义日期控件

Web的服务器日历控件

此服务器控件来是将梅花雨的日历控件与TextBox编制成服务器控件，本控件属性CanTextEmpty表：此控件的值是否允许为空，若为空，则梅花雨日历选择中有“清空”选项；若不为空，则该控件默认值为当前系统时间。using System;using System.Collections.Generic;using System.Text;using System.Web.UI.WebCon

汤母嗑螺蛳 1254

Java自定义日期时间选择控件

Java自定义日期时间选择控件，支持常见的格式：如yyyy-MM-dd HH:mm:ss 或yyyy-MM-dd等这些基本格式组合，控件根据格式串调整下拉选择面板中显示内容

嵌入式设备低功耗设计误区：为什么你的RK3568总是被‘意外’唤醒？

本文深入分析RK3568嵌入式设备低功耗设计中的常见误区，重点探讨唤醒源管理不当导致的意外唤醒问题。通过解析硬件设计陷阱、软件配置错误及系统化审计方法，帮助开发者有效排查和解决GPIO配置、唤醒源设置等关键因素引起的功耗异常，提升设备续航能力。

php55的博客 460

时间选择器控件默认时间自定义

/开始时间往前推一天。需求：界面2个控件 ：开始时间选择控件 ， 结束时间选择控件，用于时间段的查询。开始时间选择控件默认时间为当前时间往前推1天，即昨天。结束时间选择控件默认时间是当前时间。

u014058950的博客 590

FPGA驱动OV5640：从SCCB协议到图像数据采集的实战解析

本文详细解析了使用FPGA驱动OV5640摄像头模组的完整流程，从SCCB协议通信、寄存器配置到图像数据采集。重点阐述了SCCB（与I2C类似）协议的实现细节、关键的上电复位时序，以及如何通过状态机解析视频流时序并捕获图像数据，为嵌入式视觉开发提供了实战指南。

weixin_29191761的博客 188

Flutter 日期选择控件使用实战

Flutter 日期选择控件使用实战 日期选择是 App 开发中的常见功能，本文我们将学习如何在 Flutter 中使用日期选择控件。 日历控件显示的几种方式 flutter 包含日历和时间控件，有以下几种： DayPicker：已弃用。v1.15.3之后改用 CalendarDatePicker。 CalendarDatePicker：1.5版后面的日期选择控件，替代了 YearPicker、MonthPicker、DayPicker。 CupertinoDatePicker、CupertinoTim

卜大爷的博客 2万+

lvds接口_LVDS，接口，时序讲解，非常好的文章

欢迎FPGA工程师加入官方微信技术群点击蓝字关注我们FPGA之家-中国最好最大的FPGA纯工程师社群1.1.1 LVDS接口分类1.1.1.1 单路6bit LVDS这种接口电路中，采用单路方式传输，每个基色信号采用6位数据，共18位RGB数据，因此，也称18位或18bit LVDS接口。此，也称18位或18bit LVDS接口。1.1.1.2 双路6bit LVDS这种接口电...

weixin_39639286的博客 1906

Plant simulation、Flexsim、Automod、Emulate3D、VisuaComponent仿真软件对比

E3D在行业内以展示效果好，入门阶段易学易用人机界面友好，电控仿真连接方便不需要借助其他第三方软件，E3D平台开放度较高用户DIY程度强，数据分析功能针对要评定对象的KPI的可根据项目或者使用者需求进行评定。3.支持导入导出多种格式的文件，比如dwg、dxf、fbx、obj、3ds、step、stp、iges、skp、stl、wrl、 bmp 等等。3.软件自带模型组件库程序代码开放，用户可以引用、修改、拷贝，按照自己的逻辑修改模型，或者创建模型并保存到组件库与别人共享。3. 支持导出布局图片。

qq_43342303的博客 3581

iview - 日期选择控件datePicker格式

前言     iview日期选择控件少一天问题         在时间控件中明明选择的是2019-05-21,但是当通过vue的调试器查看的时候，竟然是这样的     写法如下 <FormItem label="开始时间" prop...

idomyway的博客 1万+

原创_新魔百和CM201-1鸿蒙架构当贝乐家语音安卓9线刷固件包刷机教程可救砖rom刷机包

不用担心变砖，因为系统内核会自动判断分区及CPU等级，假设你CPU是高于S905L3的那么。7.adb功能支持，系统增加开机自启功能，添加老人桌面模式，默认为年轻化桌面；所以我发的这个固件可适用于_cw_ys_zg_zn代工上生产的盒子进行刷机；5.CPU及GPU算法更改，当观看4K片源时，AI智能会自动优化系统后台进程，正如我所说，本固件是采用安卓公版镜像制作而成，那么代工厂也是使用的公版镜像，1.移植鸿蒙架构代码，完美融合安卓系统，增加系统的稳定性；刷机的时候 他会自动短接链接，所以不存在变砖。

a138088150的博客 1万+

android日期选择控件DatePicker小结

最近手上的项目要求弄一个包含两个日期选择控件的UI界面（即开始时间和结束时间）。 一、 一开始就想到使用自带的DatePicker控件。但是发现其UI很难调整到项目想要的效果。尤其是其与项目theme的关系，在xml中设置style也不好使。从Popwindow到AlertDialog都试过了，只有含单个DatePicker的DateAlertDialog还比较赏心悦目，却不满足项目需要。

思念叨火车的专栏 6109

C#实战：如何用winmm.dll打造毫秒级高精度定时器（附完整代码）

本文详细介绍了在C#中利用winmm.dll实现毫秒级高精度定时器的完整方案。针对.NET内置定时器精度不足的问题，通过调用timeSetEvent等原生API，提供了超越系统时钟中断周期的精准定时能力。文章包含核心原理剖析、完整的封装类代码以及音视频处理、游戏开发等场景下的实战应用与性能调优指南。

ujm5678901的博客 690

AI 编程助手新玩法：用 Claude Code 一键调用国产大模型（DeepSeek/Kimi/GLM 对比）

本文深入评测了Claude Code与三大国产大模型（DeepSeek、Kimi、智谱GLM）的集成效果，详细对比了它们在代码生成质量、响应速度和特殊场景支持度等方面的差异。通过实测数据和实战技巧，帮助开发者选择最适合的AI编程助手组合，提升开发效率。

weixin_30955617的博客 488

Swing的日期选择控件DatePicker

Swing的日期选择控件依赖的包显示示例示例代码段 依赖的包 DatePicker.jar 显示示例 示例代码段 JLabel dateJLabel = new JLabel("日期："); final DatePicker datePicker1 = DatePickerUtil.getDatePicker(); JButton startDateBtn = new JButton("开始时间"); startDateBtn.addActi

songdancer的博客 3539

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

java 的日期选择控件_Java日期选择控件

一起学习一次项目研发中需要日期时间选择控件，网上提供的不多，且质量一般，所以只好自己做，参考了 网上某位同学的 作品 Jave 日期选择控件 DateChooser 。目前的代码将日期时间选择封装在一个按钮组件内，应该很好用，支持Application 、Appletimport java.util.Date;import java.util.Calendar;import java.text.D...

weixin_31083103的博客 1729

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

android 实现日期选择,android开发中怎么实现一个日期选择控件

android开发中怎么实现一个日期选择控件发布时间：2020-11-20 16:44:46来源：亿速云阅读：87作者：Leahandroid开发中怎么实现一个日期选择控件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。效果如下：具体实现方法为：先新建一个安卓项目DoubleDatePicker，在res/layout文件夹下新建dat...

weixin_42297439的博客 1574

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】
上一篇： asp.net导出数据到Excel的几种方法(3/3)
下一篇： 模拟126邮箱实现一次上传多个附件的例子
点赞 0
评论 2
书签 书签 5
cpp2017
cpp2017
博客等级 码龄24年 1435粉丝 12原创
+ 关注 专栏目录 订阅专栏
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值