1/11/2015

A Simple Date Selector User Control in ASP.NET (JavaScript based) - CodeProject

11,141,814Newsletter.
members (64,091 online)
Sign up for our free weekly Web Developer

home

articles

quick answers

discussions

Sign in

features

community

help

Search for articles, questions, tips

Articles Web Development User Controls General

Article
Browse Code
Stats
Revisions
Alternatives
Comments (184)

A Simple Date Selector User Control in ASP.NET

(JavaScript based)
venkriss, 10 Mar 2005

Rate this:

4.73 (61 votes)

This article explains an easy implementation of an ASP.NET DateSelector User Control.

Tagged as
VB

Download DateSelector demo project (MSI package with VB.NET Sources) - 137 Kb

ASP.NET

Download DateSelector Sources (VB.NET) - 13.6 Kb

Javascript

Download DateSelector Sources (C#)- 13.7 Kb

CSS

View A Quick Online Demo

Info
First Posted

4 Mar 2005

Views

460,262

Bookmarked

153 times

Research
Why Your
Developers Need
More Training
A Perfect Launch
Every Time: 7 Steps
to Avoid...

Windows
.NET
IIS
Visual-Studio
Dev
WebForms
Intermediate

Related Articles
ASP.NET DatePicker
User Control (Hijri /
Gregorian) shows
month and year as
dropdowns
Challenges and
solutions Architecture of a
Modern Web
Application - Part 1
An ASP.NET control
to pick a Shamsi
date on client-side
from a JavaScript
Persian calendar
BetterCalendar
WebControl
Template Generator
for JavaScript JSRazor

Fig 1: DateSelector User Control

Introduction
Date selection in a data entry interface or report selection interface is a repeating feature in any development
environment. A common requirement might be providing a popup calendar using which the user can pick a date
and load a date text box.
This article focuses on a simple solution for ASP.NET development environment which encapsulates a JavaScript
popup calendar (ASP.NET Imagecontrol), an ASP.NET TextBoxcontrol and an ASP.NET Labelcontrolling the
form of a user control.

Requirements
If we think about a date selection control, it mainly consists of three components:
a. An image or button when clicked displays a calendar to select a date.
b. A text box that holds the selected date value.
c. A label that describes the date ("Date" or "Start Date" or "End Date" etc..)
Following diagram shows the same structure in live environment. We will see the implementation of this structure
as a user control very soon. I deliberately chose not to use the ASP.NET Calendarcontrol because of postbacks.

http://www.codeproject.com/Articles/9748/A-Simple-Date-Selector-User-Control-in-ASP-NET-Jav

1/5

1/11/2015

A Simple Date Selector User Control in ASP.NET (JavaScript based) - CodeProject

Fig 2 : Structure of DateSelector

Design & Source code Structure

The source code consists of a DateSelector.ascxfile which contains the structure shown in Fig2 and a
UseDateSelector.aspx file which gives an idea on how to use the control.

Using the code

Download the source code by clicking here. Install the MSI package provided. If you have not provided any Virtual
Directory name during the installation, all the sources will be installed under the path
C:\inetpub\wwwroot\DateSelectorControl. There are only two source code files, one is DataSelector.ascx and the
other is UseDateSelector.aspx which is a sample file on how to use this DateSelectoruser control. All the
images and JavaScript functions for pop up calendar are under a folder called cal.
DateSelector.ascx file contains two properties called textand calendarDate. User can use these properties
either at design time or in the code behind.
The critical code components of both these files are listed below:

DateSelector.ascx
Collapse | Copy Code

' Get the id of the control rendered on client side

' Very essential for Javascript Calendar scripts to recognize the textbox
Public Function getClientID() As String
Return txt_Date.ClientID()
End Function
Collapse | Copy Code

' This property sets/gets the calendar date

Public Property CalendarDate() As String
Get
Return txt_Date.Text
End Get
Set(ByVal Value As String)
txt_Date.Text = Value
End Set
End Property
Collapse | Copy Code

' This Property sets or gets the the label for

' Dateselector user control
Public Property Text() As String
Get
Return lbl_Date.Text
End Get
Set(ByVal Value As String)
lbl_Date.Text = Value
End Set
End Property

To use the user control in any WebForm, register the control and then assign default properties as shown below.

UseDateSelector.aspx
Register the control and start using it within the <form>tag as shown below:
Collapse | Copy Code

1.

<%@Register TagPrefix="SControls" TagName="DateSelector"

src="DateSelector.ascx" %>

2.

<SCONTROLS:DateSelector id="useDateCal" runat="server"

Text="Start Date:"></SCONTROLS:DateSelector>
<SCONTROLS:DateSelector id="dtCal" runat="server"
Text="End Date:"></SCONTROLS:DateSelector>

How it Works?
The imgCalendar(or the calendar image you are seeing in Fig.2) is an ASP.NET Imagecontrol and is attached
with a JavaScript "onclick" event as shown below. Whenever this image is clicked, the JavaScript takes care of
loading the text box with the selected date. This user control also works in DataGridcolumns. Observe the way I
am passing the clientIDof the control using the getClientID()instead of the normal IDof the TextBox

http://www.codeproject.com/Articles/9748/A-Simple-Date-Selector-User-Control-in-ASP-NET-Jav

2/5

1/11/2015

A Simple Date Selector User Control in ASP.NET (JavaScript based) - CodeProject

control.
Collapse | Copy Code

Dim scriptStr As String

= _ "javascript:return popUpCalendar(this," & getClientID() &;
", 'mm/dd/yyyy', '__doPostBack(\'" & getClientID() & "\')')"
imgCalendar.Attributes.Add("onclick", scriptStr)

How to Use ?
The attached ZIP (Demo) file contains an MSI package. Install the package and modify the source code to suit your
needs. If you let the installation package to install at default locations then you can access the output at:
http://localhost/DateSelectorControl/DateSelector/UseDateSelector.aspx
If you specify the "Virtual Directory" as "DateSelectorDemo" (or any other name), then you can check the output at
this URL:
http://localhost/DateSelectorDemo/DateSelector/UseDateSelector.aspx
After the installation is complete, if you want to modify/view sources, open Visual Studio .NET and open the
project at this location:
http://localhost/DateSelectorControl or http://localhost/YourVirDirName
There are also VB.NET and C# source files attached as separate links. Download them by clicking the links at the
top of this article.

Acknowledgements
Special Thanks to fuushikaden for his wonderful JavaScript calendar.

Future Improvements
1. Make the Labelposition dynamic. Right now the Labelis placed to the left of the TextBox. We may want
to place the Labeleither at the top or bottom of the TextBoxbecause of space constraints or for
aesthetic reasons.
2. Modify the JavaScript so that the user cannot select future dates.

License
This article has no explicit license attached to it but may contain
usage terms in the article text or the download files themselves.
If in doubt please contact the author via the discussion board
below.
A list of licenses authors might use can be found here

Share
EMAIL

About the Author

venkriss

No Biography provided

Web Developer
United States

http://www.codeproject.com/Articles/9748/A-Simple-Date-Selector-User-Control-in-ASP-NET-Jav

3/5