65.9K
CodeProject is changing. Read more.
Home

DHTML Calendar Control with Time

Sunil Kumtakar
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.16/5 (10 votes)

Jan 9, 2007

LGPL3

2 min read

viewsIcon

69894

downloadIcon

1149

DHTML Calendar control with Time

Sample Image - maximum width is 600 pixels

Introduction

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.

History

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