Click here to Skip to main content
15,868,016 members
Articles / Web Development / XHTML
Article

Date Picker Custom Control in ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.40/5 (6 votes)
19 Apr 2009CPOL2 min read 49.2K   1.6K   12   14
No need to place any image,css,javascript file in project. Only three lines of code can do the wonder.

Introduction

This article is all about the custom control for date picker. This date picker can be used anywhere in asp.net projects. Just go to toolbox. In general section click on 'Choose Item'. Browse for the DatePicker.dll. Add it and you just need to drag drop it on your aspx pages.

Background

I am very thankful to Epoch Calendar for providing javascript & css files. You can refer to it at http://www.javascriptkit.com/script/script2/epoch/index.shtml.

Using the code 

Just go to toolbox. In general section click on 'Choose Item'. Browse for the DatePicker.dll. Add it and you just need to drag drop it on your aspx pages. its reference will be added to Bin by itself. Now you can see a simple textbox in which if you click, you will see a calendar will pop-out.

Just small code segment needs to be added in the aspx page. We need to create a new instance of the calendar. Code snippet is shown as follows. Just add it to the head section of the aspx page or after the page header if you are using usercontrol.

ASP.NET
<script language="javascript" type="text/javascript">
 var calendar1;
 /*must be declared in global scope*/
 /*put the calendar initializations in the window's onload() method*/
 window.onload = function() {
 calendar1 = new Epoch('calendar1','popup',document.getElementById('DatePicker1'),false);
   return;
 }
 </script>

Remember that this method will be called on Onload & this should remain intact as it is otherwise the calendar will not work. You can also do it by adding attributes in code behind.  

Points of Interest

There are lots of other useful custom control which we can make. These controls increases the re usability & save our time to code. Also any change can be made separately and after that the dll can be placed in any project.

History 

Before creating this custom control, user had to place javascript file, css file etc in there project explicitly. If any of these file(s) missed, then our pages shows error(s). Now this problem will not be faced any more.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
Working in .NET Technologies from the last +11 years and Exploring myself in .NET by learning, implementing and sharing my ideas of latest topics.
For further queries, shoot me a mail at sameersayani@gmail.com

Comments and Discussions

 
Questionhaving problem with IE9 Pin
Sharda Jaiswal2-Nov-12 23:39
Sharda Jaiswal2-Nov-12 23:39 
AnswerRe: having problem with IE9 Pin
Sam_IN12-Feb-13 23:53
Sam_IN12-Feb-13 23:53 
GeneralMy vote of 5 Pin
tienito29-Dec-10 17:42
tienito29-Dec-10 17:42 
Questionhow can I change the format of the date component Pin
onr4-Apr-10 12:33
onr4-Apr-10 12:33 
AnswerRe: how can I change the format of the date component Pin
Member 90396067-Aug-13 23:50
Member 90396067-Aug-13 23:50 
GeneralPity I cant vote a zero. Pin
robvon19-Apr-09 16:48
robvon19-Apr-09 16:48 
GeneralRe: Pity I cant vote a zero. Pin
Sam_IN19-Apr-09 20:12
Sam_IN19-Apr-09 20:12 
Generali wonder! Pin
dsmportal19-Apr-09 14:05
dsmportal19-Apr-09 14:05 
GeneralRe: i wonder! Pin
Sam_IN20-Apr-09 1:08
Sam_IN20-Apr-09 1:08 
GeneralMy vote of 1 Pin
Steven Berkovitz19-Apr-09 11:04
Steven Berkovitz19-Apr-09 11:04 
GeneralRe: My vote of 1 Pin
Sam_IN20-Apr-09 1:12
Sam_IN20-Apr-09 1:12 
GeneralRe: My vote of 1 Pin
Mercede22-Jul-09 18:23
Mercede22-Jul-09 18:23 
GeneralRe: My vote of 1 Pin
Sam_IN22-Jul-09 20:22
Sam_IN22-Jul-09 20:22 
GeneralRe: My vote of 1 Pin
Mercede24-Jul-09 7:34
Mercede24-Jul-09 7:34 

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.