Click here to Skip to main content
13,248,562 members (84,944 online)
Click here to Skip to main content
Add your own
alternative version


45 bookmarked
Posted 9 Jan 2007

DHTML Calendar Control with Time

, 25 Jan 2010
Rate this:
Please Sign up or sign in to vote.
DHTML Calendar control with Time
Sample Image - maximum width is 600 pixels


It gives me pleasure to present this DHTML Calendar Control with Time. I have tried to make it as user friendly as possible, so that the user does not struggle while entering the date in your webforms. The other interesting part is that it also includes the interface to capture time.

This control has been tested under Internet Explorer 6-7, Netscape 8 and Opera 9, and it worked fine. Sorry I couldn't test it with other browser/ versions.

The traditional Calendar display has not been discontinued. It looks as follows (clicking the calendar icon next to the Close button brings the traditional Calendar control). As of now, it only accepts date in dd-MMM-yyyy format.

Functionality Offered

  • Can be used to accept Date/ Time/ Both
  • Time can be accepted in 2 formats.(12/ 24 Hrs)
  • Date separator can be defined ( -, / )
  • Years can be restricted between a given range.
  • Arrow keys(Up, Down) or PageUp & PageDown keys could be used to scroll the years.
  • If attached input element is readOnly, pressing delete key on the element would clear the input element.
  • The following date formats are supported - dd-MM-yyyy, MM-dd-yyyy, dd-MMM-yyyy, yyyy-MM-dd.
  • Facilitates Calendar popup on press of a configured hot key (default F2)
  • User can define a Callback function which would get called once the date selection is complete.
1: <input type='text' name="textBox1" id="textBox1">
2: <img id="button1" style="width: 20px; height:14px" 

	height=14 alt="Select Date" src= "myCalendar/calendar.gif" width=24>
3: <script language="javascript">
4: 	myCalendar.setup({inputField : "textBox1", button : "button1 "}); 
5: </script>			

Note: The following 2 lines are required under the <head> section of your page.

<LINK href="myCalendar/mycalendar.css" type="text/css" rel="STYLESHEET">
<script src="myCalendar/myCalendar.js" type="text/javascript"></script>

First you are required to place an input control type='text' as in line 1. Next place an img control next to it as in line 2 (remember to provide a proper value for its ID attribute).

Copy the lines 3 to 5 as it is, and then change the values against the "inputField" and "button" parameters on line 4.

Note: Please refer to the test.html file in the source zip for more help on parameters.


  • 9th January, 2007: Initial post
  • 24th January, 2010: Article updated


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

Sunil Kumtakar
Web Developer
India India

You may also be interested in...


Comments and Discussions

GeneralI want the Date time format as yyyy-mm-dd hh:mm:ss format Pin
Ravishankar M21-Jan-10 20:33
memberRavishankar M21-Jan-10 20:33 
QuestionSeconds??? Pin
nfiskeo26-Oct-09 4:08
membernfiskeo26-Oct-09 4:08 
Generalneeds validation Pin
Will6628-Mar-08 19:44
memberWill6628-Mar-08 19:44 
GeneralRe: needs validation Pin
FelixAlmodovar29-Jun-08 3:23
memberFelixAlmodovar29-Jun-08 3:23 
GeneralJavascript event calendar Pin
nbohr99a9-Sep-07 4:58
membernbohr99a9-Sep-07 4:58 
QuestionYour calendar js in xsl file. Pin
yosizack28-Jul-07 5:34
memberyosizack28-Jul-07 5:34 
GeneralImplementing Two Instances of the Calendar Pin
TheMadRef25-Mar-07 9:55
memberTheMadRef25-Mar-07 9:55 
I have a page where i have two versions of the calendar:


I have managed to do almost everything except the following:

1- The second calendar seems to have 2 sets of months and dates.
2- When selecting the first date (does not matter which one) it fills in the correct text input. But when selecting the second date (again does not matter the order) both text boxes get assigned the date from here on out.

I basically have two different versions of mycalender (mycalendar and mycalendar2), but I'm missing something internally.

Thanks in advance for the help
Questionhelp! help! help! undefine myCalendar [modified] Pin
fuxiurong_20014-Mar-07 20:44
memberfuxiurong_20014-Mar-07 20:44 
AnswerRe: help! help! help! undefine myCalendar Pin
Sunil Kumtakar5-Mar-07 6:32
memberSunil Kumtakar5-Mar-07 6:32 
QuestionControl is going back Pin
ramanatha reddy21-Feb-07 5:11
memberramanatha reddy21-Feb-07 5:11 
QuestionMozilla/MAC Compability? Pin
TheMadRef25-Jan-07 10:31
memberTheMadRef25-Jan-07 10:31 
AnswerRe: Mozilla/MAC Compability? Pin
Sunil Kumtakar27-Jan-07 2:39
memberSunil Kumtakar27-Jan-07 2:39 
GeneralGood job Pin
shewo17-Jan-07 19:14
membershewo17-Jan-07 19:14 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 25 Jan 2010
Article Copyright 2007 by Sunil Kumtakar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid