Tuesday, February 24, 2015

Create Date Picker Custom Control

File->New->Website.




Delete the default UserControl1.cs 

Add New Item





Add New Class.

write the following code in class as shown below.

DatePicker.cs


using System;

using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.SessionState;
using AjaxControlToolkit;

namespace DatePickerLibrary

{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:DatePicker runat=server></{0}:DatePicker>")]
    public class DatePicker : WebControl
    {
        private string _day;
        private string _month;
        private string _year;
        private TextBox _dateTxt;
        private Image _calendarImage;
        private ToolkitScriptManager _scriptManager;
        private CalendarExtender _calendarExtender;
        private RegularExpressionValidator _expressionValidator;

        public DatePicker()

        {
            _dateTxt = new TextBox();
            _calendarImage = new Image();
            _calendarExtender = new CalendarExtender();
            _scriptManager = new ToolkitScriptManager();
            _expressionValidator = new RegularExpressionValidator();
        }

        public string ImageUrl { get; set; }

        public string DateStyle { get; set; }
        public string ImageStyle { get; set; }
        public string ID { get; set; }

        public string DateClientID

        {
            get
            {
                return _dateTxt.ClientID;
            }
        }

        public string Text

        {
            get
            {
                return _dateTxt.Text;
            }
            set
            {
                _dateTxt.Text = value;
            }
        }

        public bool Enabled

        {
            get
            {
                return _dateTxt.Enabled;
            }
            set
            {
                _dateTxt.Enabled = value;
            }
        }

        public bool Visible

        {
            get
            {
                return _dateTxt.Visible;
            }
            set
            {
                _dateTxt.Visible = value;
            }
        }

        public string Format

        {
            get
            {
                return _calendarExtender.Format;
            }
            set
            {
                _calendarExtender.Format = value;
                if (Format == "dd/MM/yyyy")
                {
                    _expressionValidator.ValidationExpression = @"(^^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$)";
                }
                else if (Format == "dd.MM.yyyy")
                {
                    _expressionValidator.ValidationExpression = @"(^(((0[1-9]|[12][0-8])[\.](0[1-9]|1[012]))|((29|30|31)[\.](0[13578]|1[02]))|((29|30)[\.](0[4,6,9]|11)))[\.](19|[2-9][0-9])\d\d$)|(^29[\.]02[\.](19|[2-9][0-9])(00|04|0 12|16|20|24|2 32|36|40|44|4 52|56|60|64|6 72|76|80|84|8 92|96)$)";
                }
                else if (Format == "dd-MM-yyyy")
                {
                    _expressionValidator.ValidationExpression = @"(^(((0[1-9]|[12][0-8])[\-](0[1-9]|1[012]))|((29|30|31)[\-](0[13578]|1[02]))|((29|30)[\-](0[4,6,9]|11)))[\-](19|[2-9][0-9])\d\d$)|(^29[\-]02[\-](19|[2-9][0-9])(00|04|0 12|16|20|24|2 32|36|40|44|4 52|56|60|64|6 72|76|80|84|8 92|96)$)";
                }
                else if (Format == "MM/dd/yyyy")
                {
                    _expressionValidator.ValidationExpression = @"(^(((0[1-9]|[12][0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|0 12|16|20|24|2 32|36|40|44|4 52|56|60|64|6 72|76|80|84|8 92|96)$)";
                }
            }
        }
        public DateTime Value
        {
            set
            {
                _dateTxt.Text = value.ToString(Format);
            }
            get
            {
                if (Format == "dd/MM/yyyy")
                {
                    _year = _dateTxt.Text.Split('/')[2];
                    _month = _dateTxt.Text.Split('/')[1];
                    _day = _dateTxt.Text.Split('/')[0];
                }
                else if (Format == "dd.MM.yyyy")
                {
                    _year = _dateTxt.Text.Split('.')[2];
                    _month = _dateTxt.Text.Split('.')[1];
                    _day = _dateTxt.Text.Split('.')[0];
                }
                else if (Format == "dd-MM-yyyy")
                {
                    _year = _dateTxt.Text.Split('-')[2];
                    _month = _dateTxt.Text.Split('-')[1];
                    _day = _dateTxt.Text.Split('-')[0];
                }

                else if (Format == "MM/dd/yyyy")

                {
                    _year = _dateTxt.Text.Split('/')[2];
                    _month = _dateTxt.Text.Split('/')[0];
                    _day = _dateTxt.Text.Split('/')[1];
                }
                else if (Format == "MM.dd.yyyy")
                {
                    _year = _dateTxt.Text.Split('.')[2];
                    _month = _dateTxt.Text.Split('.')[0];
                    _day = _dateTxt.Text.Split('.')[1];
                }
                else if (Format == "MM-dd-yyyy")
                {
                    _year = _dateTxt.Text.Split('-')[2];
                    _month = _dateTxt.Text.Split('-')[0];
                    _day = _dateTxt.Text.Split('-')[1];
                }
                return new DateTime(Convert.ToInt32(_year), Convert.ToInt32(_month), Convert.ToInt32(_day));
            }
        }

        protected override void OnInit(EventArgs e)

        {
            _dateTxt.ID = ID;
            if (Page.IsPostBack)
            {
                _dateTxt.Text = HttpContext.Current.Request.Form[this._dateTxt.ID];
            }
            _dateTxt.CssClass = DateStyle;
            _calendarImage.CssClass = "";
            _scriptManager.ID = "ScriptManager";
            _calendarImage.ID = ID + "CalendarImage";
            _calendarImage.ImageUrl = ImageUrl;
            _calendarImage.CssClass = ImageStyle; 
            _expressionValidator.ID = ID + "ExpressionValidator";
            _expressionValidator.ErrorMessage = "Invalid";
            _expressionValidator.SetFocusOnError = true;
            _expressionValidator.ControlToValidate = ID;
            _scriptManager.ID = "ScriptManager";
            _calendarExtender.ID = ID + "CalendarExtender";
            base.OnInit(e);
        }

        protected override void CreateChildControls()

        {
            _calendarExtender.PopupButtonID = ID + "CalendarImage";
            _calendarExtender.Format = this.Format;
            _calendarExtender.TargetControlID = ID;

            this.Controls.Clear();

            this.Controls.Add(_dateTxt);
            this.Controls.Add(_expressionValidator);
            this.Controls.Add(_calendarExtender);

            this.Controls.Add(_calendarImage);

            this.EnableViewState = true;
            base.CreateChildControls();
        }

        protected override void RenderContents(HtmlTextWriter output)

        {
            _dateTxt.RenderControl(output);
            _calendarImage.RenderControl(output);
            _calendarExtender.RenderControl(output);
            _expressionValidator.RenderControl(output);
        }
    }
}


Now, Build the solution the dll , will be generated. and then add new project- and add reference of this dll to it. 




Go to Tool Box and Add the dll as shown below.











Click on Browse Button and add the dll








Click on Open Button, and then Click on Ok Button.






Now, create a new web form  and drag this control. 

.aspx code


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


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="scripts/Jquery.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <cc1:DatePicker ID="DatePicker1" ImageUrl="Images/calendar.png" Format="dd/MM/yyyy" runat="server" />
    </div>
    </form>
</body>

</html>


Add a folder with Images and Add any calender Image to It.


Now, see the output



No comments:

Post a Comment

Thank you for visiting my blog

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...