Every Article I write is like a story. There are a lot of Companies that provide readymade controls that skinable and make out GUI (Graphical User interface) looks good. Spending time inventing a Wheel is not a Good idea. A lot of Developers or Development houses should look at Infragistics (www.Infragistics.com), ComponentArt and Telerik. There are more of them but these are Microsoft partners and they have made their mark in providing readymade Controls that you can use in your Visual Studio. But there are times where we don’t have a Budget and we been Controls like Date Picker. Well if you check the Visual Studio Toolbox, there is no Such Control.
Introduction
Every Article I write is like a story.
There are a lot of Companies that provide readymade controls that skinable and
make out GUI (Graphical User interface) looks good. Spending time inventing a Wheel
is not a Good idea. A lot of Developers or Development houses should look at Infragistics
(www.Infragistics.com),
ComponentArt and Telerik. There are more of them but these are Microsoft
partners and they have made their mark in providing readymade Controls that you
can use in your Visual Studio. But there are times where we don’t have a Budget
and we been Controls like Date Picker. Well if you check the Visual Studio
Toolbox, there is no Such Control.
Background
In this Article I am going explain how to create your own date
picker with the Controls you have on your Visual Studio tool.
Using the code
We are going to user C# as our
language.
Start
Open Visual Studio and Create a New Website.
Automatically you will have an empty page defined for you like this
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Go to Design View and you will notice
there is nothing on your page. Now open your Toolbox and add a Calendar Control
in your page as depicted in the Diagram below.
And after you have added the Calendar control add the linkButton Control from
your Toolbox, Add the textbox control.
And after you have added these two
Controls you should have something like this in your mark-up.
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="Calendar1" runat="server" Visible="False"></asp:Calendar>
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">PickDate...</asp:LinkButton>
</form>
</body>
</html>
The Next Step is to Change the Calendar
Properties so that it cannot be visible when the Page load, but it needs to be
visible only when the user wants to pick a Date. You can Right Click on the
Control and Go to the Properties, and in the Properties you can change it as
depicted below.
Set it to False.
Now our Design looks good. Let us go
and write our code on the server side. Double Click on the LinkButton. And you
will be taken to an empty Click Event like this
protected void LinkButton1_Click(object
sender, EventArgs e)
{
}
Now set the Property of the textbox
“AutopostBack” to true as depicted Below
Now write the Following Code
protected void
LinkButton1_Click(object sender, EventArgs e)
{
Calendar1.Visible = true;
}
This code will Tell the Calender
Control to show and the Next thing you need to do is to trap the event of the
Calender Control so that after the date is selected, the calender will close
and we will get the Selected date and fill it in the textbox. Right Click on
your Calender and go to Properties like as depicted below
In the Property Dialogbox , click the
Lightning sign that is orange. If you have never used the events of a Control
Visual Studio will not create them for you until you create them , let us see
what events we have for the Calender Control.
Now as you can see no events have
been created before, you will notice by the right hand side is Empty on the
second Column for each event. Now we are looking for “SelectionChanged” event
of the calender control. So to create an Event double click on the empty right
corresponding right and you will be taken to the event defination as depicted
in the Following code.
protected void
Calendar1_SelectionChanged(object sender, EventArgs e)
{
}
Now if you go back again to the Events through you property
dialogbox, you will notice the event now exists even there as depicted in the
diagram below
Now in your Calendar event write the
following code
protected void Calendar1_SelectionChanged(object sender, EventArgs
e)
{
TextBox1.Text =
Calendar1.SelectedDate.ToLongDateString();
Calendar1.Visible = false;
}
The above code, assigns the Selected
date to the Textbox and hides the Calender. This Happens immidiately when the
date on the Calender is selected. As you can see I have used a LongDate, this
will be like
Tuesday, September 01, 2009
But there are a lot of Options to the
types of Dates; you can play around the Intellisense after the selectedDate
event statement to let it give you the date that you desire. The Thing you must
note is that the Format of the Date Depends again on the Format you have used
in your Computer. If you go to Control Panel of your Computer and select
“Regional and language Options” for XP, you will find something like this
This will help for in case you think
your code is not working for you.
Now press 5 and run you’re Project and
your page will look like this
If you click on the “PickDate”
linkButton, the Calendar Control will popup like this
And the Moment you select a Date the
Calendar control will disappear and the selected date will be placed on the Textbox
like this
Conclusion
The
Solution was simple and clear. This is how we create our own Date picker
Thank
you for visiting DotnetFunda.
Vuyiswa
Maseko