Month and Year Picker UserControl I am going to discuss about the pop-Up calender control created by me for selecting Month and Year. By this post you will get to know how to easily you can create 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 you web project develop in any other language.
Below is the picture of the control
Now following is step by step Explanation of control created and how to use that control in your application.
Step 1 : Control Design i.e ASCX file
To create 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 is get created , than you can add the following line of code to get display as show in the fist image above
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateBox.ascx.cs" Inherits="DateBox" %>
<DIV style="FLOAT: left" id=labelContainer runat="server"><ASP:LABEL id=lblText runat="server"></ASP:LABEL>
</DIV><DIV><ASP:TEXTBOX id=txtDate runat="server"></ASP:TEXTBOX>
<ASP:BUTTON id=btnDate runat="server" text="...">
</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 calender window shown in the second image above.
btnDate : - Button control, when get clicked it display the pop-Up calender window.
Step 2 : Control Code-Behind i.e .CS file
Once you 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 conrol which is going to display selected date.
Method
Page_Load : - method get executed when page load check, if the label control don'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 going to use by the jQuery/javascript to display selected date.
Step 3 : Code to create popUp Calender i.e. .JS file
After you done with Stpe 2, Add 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="TEXT-ALIGN: center; PADDING-TOP: 5px" id=bholder></DIV>");
var buttonOk = $("<DIV style="FLOAT: left"><INPUT id=buttonDone onclick=buttonDoneClick() value=Done type=button></DIV>");
var buttonCancel = $("<DIV style="FLOAT: right"><INPUT id=buttonCancel onclick=Close_Popup() value=Cancel type=button></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.
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 selected by selector.
Method
buttonDoneClick : - Get the selected value of the Month and Year combo box and display text in the textbox attached with the calender control.
buttonClick : - Display calender popUp window , the method make use of position method of jquery to get the location of button and assign 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 following style shit to Css file which you can 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 is get attached with the the div which is having 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 id=DateBox runat="server" labeltext="Select period : ">
</UC:DATEBOX>
So to use 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 Lable property to display text with control.
Summary
So its quite easy to create popUp control and use it as User Control in your application. But if you are working on other than .net than just you need to use .Js and .Css file and need to create control on your page.