Click here to Skip to main content
12,450,891 members (47,323 online)
Click here to Skip to main content
Add your own
alternative version

Stats

504.7K views
16.2K downloads
152 bookmarked
Posted

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

, 10 Mar 2005
Rate this:
Please Sign up or sign in to vote.
This article explains an easy implementation of an ASP.NET DateSelector User Control.

Sample screenshot

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 Image control), an ASP.NET TextBox control and an ASP.NET Label controlling the form of a user control.

Requirements

If we think about a date selection control, it mainly consists of three components:

  1. An image or button when clicked displays a calendar to select a date.
  2. A text box that holds the selected date value.
  3. 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 Calendar control because of postbacks.

Sample screenshot

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 DateSelector user control. All the images and JavaScript functions for pop up calendar are under a folder called cal.

DateSelector.ascx file contains two properties called text and 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

' 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
' 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
' 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:

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 Image control 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 DataGrid columns. Observe the way I am passing the clientID of the control using the getClientID() instead of the normal ID of the TextBox control.

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 Label position dynamic. Right now the Label is placed to the left of the TextBox. We may want to place the Label either at the top or bottom of the TextBox because 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

About the Author

venkriss
Web Developer
United States United States
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Generalwith masterpage Inside updatepanel inside panel 'object required' error Pin
joshua_t_12324-Oct-07 11:23
memberjoshua_t_12324-Oct-07 11:23 
GeneralNULL VALUE SOLUTION Pin
anit22-Oct-07 14:24
memberanit22-Oct-07 14:24 
GeneralDoes not work in VS2005 Pin
udaykatakam19-Sep-07 22:05
memberudaykatakam19-Sep-07 22:05 
AnswerRe: Does not work in VS2005 Pin
vravi10028-Sep-07 7:17
membervravi10028-Sep-07 7:17 
GeneralWon't install on dev machine Pin
Richard Jones14-Sep-07 8:02
memberRichard Jones14-Sep-07 8:02 
QuestionWhy is error rised inside a panel? Pin
adroit789-Sep-07 23:10
memberadroit789-Sep-07 23:10 
GeneralFirefox / Safari Positioning Pin
mikefle28-Aug-07 4:07
membermikefle28-Aug-07 4:07 
Generalunable to select weekends Pin
ironclaw998-Aug-07 15:51
memberironclaw998-Aug-07 15:51 
Generalproblems with overflow: auto Pin
SvenVanoverbeke19-Jul-07 4:10
memberSvenVanoverbeke19-Jul-07 4:10 
GeneralRe: problems with overflow: auto Pin
Member 28476334-Nov-09 22:30
memberMember 28476334-Nov-09 22:30 
GeneralMicrosoft JScript runtime error: 'PersBaseUC1_PersProviderGeneral' is undefined Pin
grace20073-Jul-07 8:33
membergrace20073-Jul-07 8:33 
GeneralI am using VS 2005 and it works file. [modified] Pin
vtkiet05@hotmail.com24-May-07 16:47
membervtkiet05@hotmail.com24-May-07 16:47 
GeneralRe: I am using VS 2005 and it works file. Pin
HasEveryAliasBeenTaken1-Jun-07 5:27
memberHasEveryAliasBeenTaken1-Jun-07 5:27 
GeneralRe: I am using VS 2005 and it works file. Pin
binoy rajan31-Jul-08 3:55
memberbinoy rajan31-Jul-08 3:55 
GeneralGreat Effort Pin
MussaratAziz24-May-07 2:05
memberMussaratAziz24-May-07 2:05 
GeneralLook at the new ASP.NET AJAX calendar... Pin
venkriss23-May-07 11:47
membervenkriss23-May-07 11:47 
QuestionPlease did anybody successfully make it work in VS 2005? Pin
tango8118-Apr-07 5:18
membertango8118-Apr-07 5:18 
AnswerRe: Please did anybody successfully make it work in VS 2005? Pin
amithsasi25-Apr-07 18:13
memberamithsasi25-Apr-07 18:13 
GeneralRe: Please did anybody successfully make it work in VS 2005? Pin
vtkiet05@hotmail.com22-May-07 16:09
membervtkiet05@hotmail.com22-May-07 16:09 
AnswerRe: Please did anybody successfully make it work in VS 2005? Pin
aida12315-Jun-07 6:00
memberaida12315-Jun-07 6:00 
GeneralRe: Please did anybody successfully make it work in VS 2005? Pin
naresh138216-Dec-07 23:10
membernaresh138216-Dec-07 23:10 
GeneralCalendar View does the postback if i use Frames Pin
Kevin_4u2nv14-Mar-07 13:14
memberKevin_4u2nv14-Mar-07 13:14 
GeneralAnother Server Error in '/' Application for VB app Pin
Patrice in Irvine13-Mar-07 8:08
memberPatrice in Irvine13-Mar-07 8:08 
GeneralRe: Another Server Error in '/' Application for VB app Pin
Frosty1_4me8-May-07 7:20
memberFrosty1_4me8-May-07 7:20 
GeneralNeed Help for DateTime Pin
Member #161160028-Feb-07 1:56
memberMember #161160028-Feb-07 1:56 
GeneralRe: Need Help for DateTime Pin
Frosty1_4me8-May-07 6:59
memberFrosty1_4me8-May-07 6:59 
GeneralOn master page calender is not displayed properly Pin
radhikajp@indiatimes.com15-Feb-07 20:22
memberradhikajp@indiatimes.com15-Feb-07 20:22 
GeneralRe: On master page calender is not displayed properly Pin
Pragv23-Feb-07 5:16
memberPragv23-Feb-07 5:16 
GeneralC# and .net 2.0 Pin
tmoran117310-Jan-07 3:58
membertmoran117310-Jan-07 3:58 
GeneralControl in MasterPage Pin
Pragv31-Dec-06 12:22
memberPragv31-Dec-06 12:22 
GeneralRe: Control in MasterPage Pin
piggy759-Feb-07 14:35
memberpiggy759-Feb-07 14:35 
GeneralRe: Control in MasterPage Pin
radhikajp@indiatimes.com15-Feb-07 20:24
memberradhikajp@indiatimes.com15-Feb-07 20:24 
GeneralRe: Control in MasterPage Pin
Pragv23-Feb-07 5:13
memberPragv23-Feb-07 5:13 
GeneralServer Error in '/DateSelector' Application. Pin
daybug30-Sep-06 21:17
memberdaybug30-Sep-06 21:17 
GeneralRe: Server Error in '/DateSelector' Application. Pin
Sina Falahati21-Oct-06 8:01
memberSina Falahati21-Oct-06 8:01 
QuestionUnable to Position the calendar when putting in table row and getting the error in “'offsetleft' is null or not an object” Pin
Rajan Srivastava25-Aug-06 0:52
memberRajan Srivastava25-Aug-06 0:52 
GeneralImage not showing Pin
Kent@work23-Aug-06 17:19
memberKent@work23-Aug-06 17:19 
GeneralRe: Image not showing Pin
Kent@work23-Aug-06 17:24
memberKent@work23-Aug-06 17:24 
QuestionError : object Required Pin
Balachandra.S16-Aug-06 20:25
memberBalachandra.S16-Aug-06 20:25 
AnswerRe: Error : object Required Pin
poinciana22-Aug-06 21:48
memberpoinciana22-Aug-06 21:48 
AnswerRe: Error : object Required Pin
somabss9-Jan-07 0:24
membersomabss9-Jan-07 0:24 
AnswerRe: Error : object Required Pin
piggy759-Feb-07 14:38
memberpiggy759-Feb-07 14:38 
GeneralRe: Error : object Required Pin
Sameer Goel1-Mar-07 23:01
memberSameer Goel1-Mar-07 23:01 
GeneralEnhancements / updates [modified] Pin
markrae25-Jul-06 9:41
membermarkrae25-Jul-06 9:41 
GeneralJavascript error when Smartnavigation is set to true Pin
chatwithbalaji20-Jul-06 13:43
memberchatwithbalaji20-Jul-06 13:43 
GeneralUnable to position dateselector control Pin
phishy_phish5-Jul-06 23:28
memberphishy_phish5-Jul-06 23:28 
GeneralUnable to Postision the calendar Pin
Rakesh Gangula5-Jul-06 3:08
memberRakesh Gangula5-Jul-06 3:08 
GeneralRe: Unable to Postision the calendar Pin
Rajan Srivastava30-Aug-06 2:14
memberRajan Srivastava30-Aug-06 2:14 
GeneralProblem in DateSelector. Post Back Pin
bilalabbas4-May-06 22:27
memberbilalabbas4-May-06 22:27 
GeneralRe: Problem in DateSelector. Post Back Pin
jasen fiedler29-Sep-09 11:43
memberjasen fiedler29-Sep-09 11:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160826.1 | Last Updated 10 Mar 2005
Article Copyright 2005 by venkriss
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid