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

最新推荐文章于 2025-06-21 12:23:08 发布
原创 最新推荐文章于 2025-06-21 12:23:08 发布 · 2.9k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#function #javascript #string #null #border
#class
这篇博客介绍了如何创建一个自定义的日期选择控件，主要利用JavaScript实现，并将其封装为ASP.NET的自定义控件。控件的使用包括设置TextBox样式、图片样式、是否必填日期等属性。作者提供了源码和资源文件，鼓励有兴趣的读者进行改进。

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

 

iCalendar:vue的PC端日期选择器
04-01
end 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
WebForm下日期时间选择控件
11-26
web form下日期，时间选择控件。支持多种语言，可以自定义格式，丰富的风格供选择。
asp.net千奇百怪的日历【月儿原创】
深度Java
05-14 3万+
asp.net千奇百怪的日历作者：清清月儿 主页：http://blog.csdn.net/21aspnet/           时间：2007.5.14日历控件是我们经常使用的，本文把常用的几款日历总结如下。 1.下拉日历梅花雨版第1款点评：最经典的几乎完美了。代码：...@ Page Language="C#" AutoEventWireup="true"  
Vue开发--ElementUI的时间控件选择(年月日时分)
weixin_44021888的博客
10-26 2957
Vue开发--ElementUI的时间控件选择(年月日时分)
自己写的asp日历控件
weixin_33695450的博客
10-19 309
&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
Web的服务器日历控件
汤母嗑螺蛳
07-22 1250
此服务器控件来是将梅花雨的日历控件与TextBox编制成服务器控件，本控件属性CanTextEmpty表：此控件的值是否允许为空，若为空，则梅花雨日历选择中有“清空”选项；若不为空，则该控件默认值为当前系统时间。using System;using System.Collections.Generic;using System.Text;using System.Web.UI.WebCon
时间选择器控件默认时间自定义
u014058950的博客
06-16 584
/开始时间往前推一天。需求：界面2个控件 ：开始时间选择控件 ， 结束时间选择控件，用于时间段的查询。开始时间选择控件默认时间为当前时间往前推1天，即昨天。结束时间选择控件默认时间是当前时间。
Android 好看的自定义滚动式日期选择控件
热门推荐
菜鸟的自我修养
09-29 5万+
最近接触了日期选择的功能，那么肯定得需要一个日期选择控件，Android 系统有自带的 DatePicker 控件，但是不说这个控件有多 难看吧，现在 Android 手机版本那么多，用户弹出来的控件五花八门的也不太好，所以只好走自定义的道路了。先是在网上找了一 些demo看了看，发现不是很满足自己的需求，但是又懒得自己从头写，就找了一个还不错的demo，对代码进行了一些简化，并添 加了一些...
【MAUI】自定义横向日期选择控件
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
03-03 1499
这篇文章介绍了一个日历控件的实现方案，主要包含三个关键部分： 日期排序算法：当包含当天时，确保今天始终显示在最右侧；其他情况按正常周顺序（周一至周日）显示。 UI状态管理：包括日期选中状态（特殊背景色）、当天标记（用"今"代替数字）、过去日期（透明背景）以及事件标记（小圆点）。 交互功能：通过TapGestureRecognizer实现日期点击，并通过Command绑定到ViewModel处理逻辑。 文中提供了XAML前端布局代码和C# ViewModel中的日期处理逻辑，展示了如何动态
HTML日期选择控件开发指南：从基础到高级应用
最新发布
weixin_35879493的博客
06-21 1049
jQuery UI DatePicker 是一个基于 jQuery 和 jQuery UI 库的日期选择控件。它提供了用户友好的交互式界面，允许用户选择日期，并以标准格式输出。DatePicker 支持多种配置选项，例如日期格式化、最小和最大日期限制、前后导航按钮等，使得它不仅适用于简单的日期选择需求，而且可以应对复杂的业务场景。它也被广泛用于许多基于Web的应用中，以替代或增强原生HTML5的日期控件。DatePicker 提供了许多选项来定制其外观和行为。
Flutter 日期选择控件使用实战
卜大爷的博客
12-28 2万+
Flutter 日期选择控件使用实战 日期选择是 App 开发中的常见功能，本文我们将学习如何在 Flutter 中使用日期选择控件。 日历控件显示的几种方式 flutter 包含日历和时间控件，有以下几种： DayPicker：已弃用。v1.15.3之后改用 CalendarDatePicker。 CalendarDatePicker：1.5版后面的日期选择控件，替代了 YearPicker、MonthPicker、DayPicker。 CupertinoDatePicker、CupertinoTim
Java自定义日期时间选择控件
12-24
Java自定义日期时间选择控件，支持常见的格式：如yyyy-MM-dd HH:mm:ss 或yyyy-MM-dd等这些基本格式组合，控件根据格式串调整下拉选择面板中显示内容
非常好看的winform 自定义日期控件
01-29
非常好看的winform 自定义日期控件
iview - 日期选择控件datePicker格式
idomyway的博客
05-21 1万+
前言     iview日期选择控件少一天问题         在时间控件中明明选择的是2019-05-21,但是当通过vue的调试器查看的时候，竟然是这样的     写法如下 <FormItem label="开始时间" prop...
WPF自定义DatePicker实现仿HTML5日期选择控件功能
dnazhd的博客
01-14 1646
最近重写了WPF自带的DatePicker控件样式，可响应鼠标滚轮、键盘等事件修改日期，效果如图： 话不多说，直接上源码： 1、主窗体xaml： <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
android日期选择控件DatePicker小结
思念叨火车的专栏
07-21 6096
最近手上的项目要求弄一个包含两个日期选择控件的UI界面（即开始时间和结束时间）。 一、 一开始就想到使用自带的DatePicker控件。但是发现其UI很难调整到项目想要的效果。尤其是其与项目theme的关系，在xml中设置style也不好使。从Popwindow到AlertDialog都试过了，只有含单个DatePicker的DateAlertDialog还比较赏心悦目，却不满足项目需要。
Android日期选择控件使用指南
CodeSpark的博客
08-18 1087
Android开发中，日期选择是一个常见的需求，用户需要能够方便地选择日期来完成特定操作。为了满足这个需求，Android提供了日期选择控件，通过它，我们可以轻松地实现日期的选择功能。通过添加日期选择控件，并监听日期的变化，我们可以轻松地实现日期选择功能。在布局文件中添加日期选择控件后，接下来我们需要在代码中获取用户选择的日期。首先，找到日期选择控件的实例，并注册监听器来监听日期的变化。方法找到了日期选择控件的实例，并注册了日期变化的监听器。方法找到了日期选择控件的实例，并调用。一、添加日期选择控件。
Swing的日期选择控件DatePicker
songdancer的博客
09-23 3530
Swing的日期选择控件依赖的包显示示例示例代码段 依赖的包 DatePicker.jar 显示示例 示例代码段 JLabel dateJLabel = new JLabel("日期："); final DatePicker datePicker1 = DatePickerUtil.getDatePicker(); JButton startDateBtn = new JButton("开始时间"); startDateBtn.addActi
java 的日期选择控件_Java日期选择控件
weixin_31083103的博客
02-27 1723
一起学习一次项目研发中需要日期时间选择控件，网上提供的不多，且质量一般，所以只好自己做，参考了 网上某位同学的 作品 Jave 日期选择控件 DateChooser 。目前的代码将日期时间选择封装在一个按钮组件内，应该很好用，支持Application 、Appletimport java.util.Date;import java.util.Calendar;import java.text.D...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值