Tag: dhtml

Useful and Cool and easy to manage Javascript Calendar

ubk1 Comment

Hi,
Many of you often come around a problem where you need a Javascript Calendar or Datepicker. You can get a lot from searching in Google. But the problem is that they are not easy to configure.

But I have came around a script in DHTML Goodies (JS Calendar) which is brilliant. You can download the code from DHTML Goodies.

First put these two lines befoer </head> section.
As you can understand one of this is a CSS (Styel Sheet) File and another one is a Javascript file (which is the main Javascript file holding the functions of Calendar).

<link type=”text/css” rel=”stylesheet” href=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112″ mce_href=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112″ media=”screen”></LINK>
 <SCRIPT type=”text/javascript” src=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118″ mce_src=”dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118″></script>

Note that the two files  dhtmlgoodies_calendar.js and dhtmlgoodies_calendar.css are located in dhtmlgoodies_calendar directory of your server or you can you any other directory also.

Now create a Form element in <body> tag and you can put the below lines. 

<form>
<p>Click on the “Cal” buttons to see how the calendar works</p>
<table>
 <tr><td colspan=”3″><b>Dates only</b></td></tr>
 <tr>
<td>Date input 1(YYYY/MM/DD): </td><td><td>
<input type=”text” value=”2004/02/02″ name=”theDate”>
<input type=”button” value=”Cal” onclick=”displayCalendar(document.forms[0].theDate,’yyyy/mm/dd’,this)”>
</td>
</tr>
 </table>
</form>

Here you can easily understand that document.forms[0].theDate is the text box element where you want the selected dates to be inserted.
forms[0] refers to the first form in the document element or the body tag. Here is only one form. You can access the form by name or getElementById also.

Suppose the form name is dateForm: <form name=”dateForm” >
then the you can access this the text box by document.dateForm.theDate.
If you use a id attribute in form element : <form name=”dateForm” id=”dateForm”>
then you can access the text box by document.getElementById(“dateForm”).theDate.

Or you can access the text box directly by giving a id attribute to the text box element
<input type=”text” value=”2004/02/02″ name=”theDate” id=”theDate”>
Then you can access it by document.getElementById(“theDate”) only . 🙂

So you can understand that clicking on the Button whose Value is Cal you invoke the onclick() event of the input type. And it calls the function displayCalendar with parameters
1. the inout type where the text is be put.
2. the date format. You can specify a lot of formats here.

Link to download this script.