|
|
<LINK href="myCalendar/mycalendar.css" type="text/css" rel="STYLESHEET">
<LINK href="myCalendar/myCalendar.css" type="text/css" rel="STYLESHEET">
<!----------------------------- Ignore -----------------------------> <!----------------------------- Article Starts ----------------------------->
<script src="myCalendar/myCalendar.js" type="text/javascript"></script>
<UL class="download">
<LI>
<A href="myCalendar_2.0.zip">Download demo project - 14 Kb </A>
<LI>
<A href="myCalendar_2.0.zip">Download source - 14 Kb</A>
</LI>
</UL>
<P><IMG alt="Sample Image - maximum width is 600 pixels" src="img1.gif"></P>
<H2>Introduction</H2>
<P>It bring 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 it also includes the the interface to capture time.
<br>
<br>
This control has been tested under IE 6-7, Netscape 8 and Opera 9, and it
worked fine. Sorry I couldn't test it with other browser/ versions.
</P>
<IMG src="img3.gif">
<P>Though the traditional Calendar display has not been discontinued. Which looks
as follows (Clicking the calendar icon next to the Close button brings the
traditional Calendar control). As of now it only accept date in dd-MMM-yyyy
format.</P>
<IMG src="img2.gif">
<H2>Functionality Offered</H2>
<ul>
<li>
Can be used to accept Date/ Time/ Both.
<li>
Time can be accepted in 2 formats.(12/ 24 Hrs)
<LI>
Date separator can be defined ( -, / )
<li>
Years can be restricted between a given range.
<li>
Arrow keys(Up, Down) or PageUp & PageDown keys could be used to scroll the
years.
<li>
If attached input element is readOnly, pressing delete key on the element would
clear the input element.
<li>
The following date format are supported dd-MM-yyyy, MM-dd-yyyy, dd-MMM-yyyy,
yyyy-MM-dd.
<li>
Facilitates Calendar popup on press of a configured hot key (default F2).
<li>
User can define a Callback function which would get called once the date
selection is complete.</li></ul>
<H2>A small demo</H2>
<table id="Table1" border="1">
<TBODY>
<tr>
<TD>eg. 1</TD>
<td>Normal Date Control</td>
<td><input id="txtJDate" name="txtJDate"> <IMG id="btnJDate" style="WIDTH: 20px; HEIGHT: 14px" height="14" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txtJDate", button : "btnJDate", readOnly: true});
</script>
</td>
</tr>
<tr>
<TD>eg. 2</TD>
<td>Date Control with Time (12 hrs)</td>
<td><input id="txtHDate" name="txtHDate"> <IMG id="btnHDate" style="WIDTH: 20px; HEIGHT: 14px" height="14" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txtHDate", button : "btnHDate", includeTime : true, timeFormat: "12"});
</script>
</td>
</tr>
<tr>
<TD>eg. 3</TD>
<td>Date Control with Time (24 hrs)</td>
<td><input id="txtHDate1" name="txtHDate1"> <IMG id="btnHDate1" style="WIDTH: 20px; HEIGHT: 14px" height="14" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txtHDate1", button : "btnHDate1", includeTime : true, timeFormat: "24"});
</script>
</td>
</tr>
<tr>
<TD>eg. 4</TD>
<td>Only time (12 hrs)</td>
<td><input id="txt1" name="txt1"> <IMG id="btn1" style="WIDTH: 20px; HEIGHT: 14px" height="14" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txt1", button : "btn1", mode: "time", timeFormat: "12"});
</script>
</td>
</tr>
<tr>
<TD>eg. 5</TD>
<td>Only time (24 hrs)
</td>
<td><input id="txt2" name="txt2"> <IMG id="btn2" style="WIDTH: 20px; HEIGHT: 14px" height="14" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txt2", button : "btn2", mode: "time", timeFormat: "24"});
</script>
</td>
</tr>
<tr>
<TD>eg. 6</TD>
<td>Year Range defined</td>
<td><input id="txt22" name="txt22"> <IMG id="btn22" style="WIDTH: 20px; HEIGHT: 14px" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txt22", button : "btn22", yearStart: 1950, yearEnd : 2100});
</script>
</td>
</tr>
<tr>
<TD>eg. 7</TD>
<td>Normal Date Control (Access Key. Press "F2")</td>
<td><input id="txt23" name="txt23"> <IMG id="btn23" style="WIDTH: 20px; HEIGHT: 14px" alt="Select Date" src="myCalendar/calendar.gif"
width="24">
<script language="javascript">
myCalendar.setup({inputField : "txt23", button : "btn23", accessKey: true});
</script>
</td>
</tr>
</TBODY></table>
<H2>Using the code</H2>
<table border="1">
<tbody>
<tr>
<th>
</th>
<th>
Parameters used in the above examples.</th></tr>
<tr>
<td>eg. 1</td>
<td> readOnly: true</td>
</tr>
<tr>
<td>eg. 2</td>
<td>includeTime : true, timeFormat: "12"</td>
</tr>
<tr>
<td>eg. 3</td>
<td>includeTime : true, timeFormat: "24"</td>
</tr>
<tr>
<td>eg. 4</td>
<td>mode: "time", timeFormat: "12"</td>
</tr>
<tr>
<td>eg. 5</td>
<td>mode: "time", timeFormat: "24"</td>
</tr>
<tr>
<td>eg. 6</td>
<td>yearStart: 1950, yearEnd : 2100</td>
</tr>
<tr>
<td>eg. 7</td>
<td>accessKey: true</td>
</tr>
</tbody></table>
<PRE lang="html"> 1: <input type='text' name="<STRONG>textBox1</STRONG>" id="<STRONG>textBox1</STRONG>">
2: <img id="<strong>button1</STRONG>" style="width: 20px; height:14px" height=14 alt="Select Date" src= "<STRONG>myCalendar/calendar.gif</STRONG>" width=24>
3: <script language="javascript">
4: myCalendar.setup({inputField : "<STRONG>textBox1</STRONG>", button : "<STRONG>button1</STRONG> "});
5: </script>
</PRE>
<P>Note: The following 2 lines are required under the <head> section of your
page.
</P>
<PRE lang="html"> <LINK href="<strong>myCalendar/mycalendar.css</STRONG>" type="text/css" rel="STYLESHEET">
<script src="<strong>myCalendar/myCalendar.js</STRONG>" type="text/javascript"></script>
</PRE>
<P>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).
</P>
<P>Copy the lines 3 to 5 as it is, and then change the values against the
"inputField" and "button" parameters on line 4.
</P>
<P><STRONG>Note:</STRONG> Please refer to the test.html file in the source zip for
more help on parameters.
</P>
<!----------------------------- Article Ends ----------------------------->
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip