How to Create a Date Picker in ASp.NET

Vuyiswamb
Posted by in ASP.NET AJAX category on for Beginner level | Views : 131797 red flag

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


Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)