• Download source - 44.05 KB

Introduction

I am going to discuss about the pop-Up calendar control created by me for selecting Month and Year. From this post, you will get to know how to easily create a pop-Up window using jQuery as well as little about how to use it as ASP.NET user control. Well, that's not it. You can also utilize this thing in your web project developed in any other language. Below is the picture of the control.

Now, following is a step by step explanation of the control created and how to use that control in your application.

Step 1: Control Design i.e. ASCX File

To create a user control, you need to left click on the solution and click on Add New Item >> than in screen select WebUserControl as below:

After you click on Add button, one ASCX file gets created, then you can add the following line of code to get display as shown in the fist image above:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateBox.ascx.cs" 
    Inherits="DateBox" %>

<div style="float: left;"  runat="server" id="labelContainer">
<asp:label runat="server" id="lblText" />
</div>
<div>
<asp:textbox runat="server" id="txtDate" />
  <asp:button text="..." runat="server" id="btnDate">
</asp:button></div>

• lblText: Label to hold the text to display with the text box.
• txtDate: TextBox to hold the text get selected by user from the pop-Up calendar window shown in the second image above.
• btnDate: Button control, when gets clicked, it displays the pop-Up calendar window.

Step 2: Control Code-Behind i.e. .CS File

Once you are done with the control design, you can paste the following code in the codebehind, i.e., .cs file

public partial class DateBox : System.Web.UI.UserControl
{
    public string LabelText
    {
        get
        {
            return lblText.Text;
        }
        set
        {
            lblText.Text = value;
        }
    }

    public string TextData
    {
        get
        {
            return txtDate.Text;
        }
        set
        {
            txtDate.Text = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (lblText.Text == string.Empty)
                labelContainer.Visible = false;

            this.btnDate.Attributes.Add("OnClick", 
        "return buttonClick(this,'"+ txtDate.ClientID +"');");
        }
    }
}

Property

• LabelText: Used to get/set the text for the label control.
• TextData: Used to get/set the text of the textbox control which is going to display selected date.

Method

• Page_Load: This method gets executed when page load checks if the label control doesn't have text make the container div set to visible off. Adding client script on button control and passing button control itself and textbox control client id which is going to be used by the jQuery/JavaScript to display selected date.

Step 3: Code to Create popUp Calendar i.e. .JS File

After you are done with step 2, add a new JavaScript file to your solution and paste the following code in it:

jQuery(document).ready(function ($) {

    var divContainer = $("<div style="display: none;" id="window">
</div>
");

    var divButtonHolder = $("<div style="padding-removed 5px; 
    text-align: center;" id="bholder">
</div>
");
    var buttonOk = $("<div style="float: left;">
    <input type="button" value="Done"  önclick="buttonDoneClick()" id="buttonDone" />
    </div>
");
    var buttonCancel = $("<div style="float: right;">
    <input type="button" value="Cancel"  önclick="Close_Popup()" id="buttonCancel" />
    </div>
");

    var divSelectHolder = $("<div id="holder">
Select Month and Year :  </div>
");
    var ddlmonth = $("<select id="ddlmonth" cellspacing="0"> </select>    ");
    var ddlyear = $("<select id="ddlyear" cellspacing="0"> </select>");
    var i = 0;
    var month = 1;

    for (i = 1985; i <= 2020; i++) {
        ddlyear.append('<option value="' + i + '">' + i + '</option>');
    }

    i = 0;
    for (i = 1; i <= 12; i++) {
        if (i < 10) {
            month = "0" + month;
        }
        ddlmonth.append('<option value="' + month + '">' + month + '</option>');
        month++;
    }

    divSelectHolder.append(ddlmonth);
    divSelectHolder.append(ddlyear);
    divContainer.append(divSelectHolder);

    divButtonHolder.append(buttonOk);
    divButtonHolder.append(buttonCancel);
    divContainer.append(divButtonHolder);
    $('body').append(divContainer);
});

var txtDate;
function buttonDoneClick() {
    var month = $("#ddlmonth").val();
    var year = $("#ddlyear").val();

    $(txtDate).val(month + year);
    Close_Popup() 
}

function buttonClick(obj,id) {

    txtDate = ('#' + id);
    var position = $(obj).position();

    $('#window').css({ top: position.top, left: position.left }).fadeIn('fast');
    return false;
}

function Close_Popup() {
    $('#window').fadeOut('fast');
}

Variables

• divContainer: Main container which contains all controls of pop-Up
• divButtonHolder: Hold button controls of the window i.e. Done and Cancel
• buttonOk: Hold reference of button control called Done
• buttonCancel: Hold reference of button control called Cancel
• divSelectHolder: Hold Select control i.e. Month and Year combo
• ddlmonth: Hold reference of select control called Month
• ddlyear: Hold reference of select control called Year

jQuery method

• .append: Allows to append control to the control selected by filter
• .ready: Method contains the code for initialize the variable, add the option to select control and attach all created control to body of the page
• .position: Method to get the location of the control which is selected by selector

Method

• buttonDoneClick: Gets the selected value of the Month and Year combo box and displays text in the textbox attached with the calendar control
• buttonClick: Displays calendar popUp window, the method makes use of position method of jquery to get the location of button and assigns it to popUp window
• Close_Popup: To close the popUp window called when the Cancel button of the popUp window clicked

Step 4: popUp Window Style sheet i.e. .Css File

Add the following style sheet to Css file which you will be able to add from the solution.

#window {
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
left: 25%;
width:250px;
height:50px;
padding:5px;
}

Style gets attached with the div which has id called window, i.e. the popUp window.

Step 5: How to Use Control in your Project ASPX File

<%@ Register  Src="~/DateBox.ascx" TagPrefix="UC" TagName="DateBox"   %>
<script type="text/javascript" src="JavaScript/jquery.js">
</script>
<script type="text/javascript" src="JavaScript/DateBox.js">
</script>
<uc:datebox  runat="server" labeltext="Select period : " id="DateBox">
</uc:datebox> 

So to use a control in your application, you just need to register the user control, need to include jquery, created js and css file. And you can make use of Label property to display text with control.

Summary

So it's quite easy to create a popUp control and use it as a User Control in your application. But if you are working other than on .NET, then just you need to use .Js and .Css file and need to create a control on your page.