Member Avatar for asyieen

did anyone know how to make a calendar by using javascript? actually i want to put calendar next to text field, so that, the user can easily select the date and the date will come out in the text field......help me plzzz.....

  • 3 Contributors
  • 3 Replies
  • 181 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by asyieen

Dani AI

Generated

Quick diagnosis (based on ’s report and the samples from and ): the calendar opens but the picked date never appears in the textbox. That almost always means the calendar script never finds the input or the trigger element at the moment the handler is attached, or the click is following a real link instead of being intercepted by the calendar setup.

Checklist of the most common causes and how to check them

  • IDs vs names: the calendar looks up elements by their HTML id. An input with only a name attribute (or an id containing spaces like the literal id of field) will fail. Inspect the rendered HTML (DevTools → Elements) and confirm the textbox has a simple, unique id (no spaces, start with a letter).
  • Timing: if the Calendar.setup call runs before the form markup exists, handlers won’t attach. Either put the setup after the form in the page or run it on DOMContentLoaded/window.onload.
  • Missing scripts or JS errors: open the Console and Network tabs. A 404 for calendar JS or any JavaScript error will stop the setup code from running.
  • Trigger element is a real link or a submit control: if the calendar trigger is inside an <a href="..."> or a submit button, clicking may navigate/submit instead of opening and writing back. Use a plain image/button or remove the link behavior.

Minimal markup pattern to verify (note the id names — no spaces):

<input id="dateField" name="date" type="text">
<img id="dateTrigger" src="images/ew_calendar.gif" alt="Pick a date" style="cursor:pointer">

If the minimal standalone page with the calendar files works but the full page doesn’t, a conflicting script or framework (ASP.NET client-id rewriting, other libraries) is likely interfering. In that case inspect the final rendered ids and any JavaScript errors, then adjust the setup to target the actual client-side id or use a safe client-id mode. For a quick modern alternative (if starting fresh), HTML5 input type="date" or a maintained widget such as jQuery UI Datepicker avoids many of these integration pitfalls.

Recommended Answers

All 3 Replies

Member Avatar for gargg321

Put the attached folder in the folder in which your application resides. Then Insert the following javascript above the code for your form.

<link rel="stylesheet" type="text/css" media="all" href="calendar/calendar-win2k-1.css" title="win2k-1" />
<script type="text/javascript" src="calendar/calendar.js"></script>
<script type="text/javascript" src="calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="calendar/calendar-setup.js"></script>

Then put the following code just after the code in form where you are making textbox for calendar.

&nbsp;<img src="images/ew_calendar.gif" id="id of field" alt="Pick a Date" style="cursor:pointer;cursor:hand;">
  <script type="text/javascript">
Calendar.setup(
{
inputField : "id of date field", // ID of the input field
ifFormat : "%Y/%m/%d", // the date format
button : "button id" // ID of the button
}
);
calendar.zip (388.88 KB)
Member Avatar for Shanti C

Hey find this attachment...
Its simple and fine...

Member Avatar for asyieen

to shanti....thanks for ur attachment and info.....but, i got a problem...when i click on the date, the date will not reside the text field.....here, the attachment....the page come out on the calendar....why is that happened? i'll send u my coding.....

<html>
<head><script type="text/javascript" src="claender.js">
</script>
<title>create project</title></head>
<body background = "pictures/images.jpg" >
<img src = "pictures/images1.jpg" width = "1000" height = "100">
<p><center><h3><b><font color = "#9999cc">Create Project</font></b></h3></center></p>

<?php

	
	switch($_GET["action"]){
	
	default:
?>



	<b>Project Info</b><br>

	<form name ="projectinfo" action = "displaycreateproject.php" method = "POST">

	<input type = "hidden" name = "action" value= "projectinfo">
	
	<table cellspacing="5" cellpadding="5" border="0">
	
	<tr><td>Project Name:</td><td style = "padding-left:5px;"><input type="text" name="projectname" ></td></tr>
	<tr><td>Date Awarded:</td><td style = "padding-left:5px;"><input type="text" name="dateawarded"></td></tr>
   	<tr><td>Start Date:</td><td style = "padding-left:5px;"><input type="text" name="datestart"></td></tr>
	<tr><td>End Date:</td><td style="padding-left:5px;"><input type="text" name="dateend" ></td></tr>
	<tr><td>Plan Release:</td><td style = "padding-left:5px;"><input type="text" name="releaseno"></td></tr>
   	<tr><td>Remarks:</td><td style = "padding-left:5px;"><input type="text" name="remarks"></td></tr>

	</table><tr><td align = "center">
	<td colspan="2" align="right"><input type="submit" value ="Submit"/>
	<colspan="2" align="right"><input type="reset" value ="Reset"/></td></tr>
	</form><br><br><br><br>

<?php	
	
break;
	
	case 'projectplan':
?>


	<b>Project Plan / Activity List</b>
	
	
<?php
	$projectid = $_GET["projectid"];
	
?>


	<form name = "projectplan" action = "displaycreateproject.php" method = "post">
	<input type = "hidden" name = "action" value = "projectplan">
	<input type = "hidden" name = "projectid" value = "<?php echo $projectid ?>">
	

  <table cellspacing="3" cellpadding="3" border="0">

<TR><br>Task Name:<input type="text" name="taskname" >



<form action=""  method="post" enctype="multipart/form-data" name="formaddrem" >
<td align = "center"><br>Start Date:<input name="dop2" type="text" class="mbox3" id="dop2"  value="" />
<a href="javascript:show_calendar('formaddrem.dop2');"><img src="calender.gif" width="21" height="17" border="0" align="absmiddle" /></a>


<br><br>End Date:<input name="dop2" type="text" class="mbox3" id="dop2"  value="" />
                    <a href="javascript:show_calendar('formaddrem.dop2');"><img src="calender.gif" width="21" height="17" border="0" align="absmiddle" /></a>
                    
                    
 
<br><br>Remarks:<input type="textarea" cols = "20" name="description" >  
                    
	
	
		

	

	</table><tr><td align = "center">
	<td colspan="2" align="right"><input type="submit" value ="Submit"/>
	<colspan="2" align="right"><input type="reset" value ="Reset"/></td></tr>
	</form><br><br><br><br>
<?php	
	
break;

	case 'pointofcontact':
	
?>
	<b>Point of Contact</b>
<?php
	$projectid = $_GET["projectid"];
?>
	<form name = "pointofcontact" action = "displaycreateproject.php" method = "post">
	<input type = "hidden" name = "action" value = "pointofcontact">
	<input type = "hidden" name = "projectid" value = "<?php echo $projectid ?>">
	
	<form action="../" onsubmit="return checkCheckBoxes(this);">
	Asyiqin
	<input type="checkbox" name="Asyiqin" value="Asyiqin">
	<br>
	Salwa 
	<input type="checkbox" name="Salwa" value="Salwa">
	<br>
	Erhilyaty 
	<input type="checkbox" name="Erhilyaty" value="Erhilyaty">
	

	<td colspan="2" align="right"><input type="submit" value ="Submit"/>
	<colspan="2" align="right"><input type="reset" value ="Reset"/></td></tr>
	</form></form><br><br><br><br>
	
	
<?php
	
break;

	case "projectmanager":
	
?>
	<b>Project Manager</b>
	
<?php

$projectid = $_GET['projectid'];

?>



	<form name = "projectmanager" action = "displaycreateproject.php">
	<input type = "hidden" name = "action" value = "projectmanager">
	<input type = "hidden" name = "projectid" value = "<?php echo $projectid ?>">
	
	<table cellspacing="5" cellpadding="5" border="0">

	<tr><td align = "center">Project Manager:</td><td><select name="Asyiqin">
	<option value="Asyiqin">Asyiqin</option>
	<option value="Salwa" >Salwa</option>
	</select></tr>
	</table><tr><td align = "center">


	<td colspan="2" align="right"><input type="submit" value ="Submit"/>
	</td></tr>
	</form><br><br><br><br>
	
<?php

break;

	case "uploaddownload":
	
?>
	<b>Upload / Download Document</b>
<?php
	$projectid = $_GET ["projectid"];
?>
	<form uploaddownload action = "displaycreateproject.php">
	<input type = "hidden" name = "action" value = "uploaddownload">
	<input type = "hidden" name = "projectid" value = "<?php echo $projectid ?>">


	<table cellspacing="5" cellpadding="5" border="0">

	<tr><td align = "center">Project ID:</td><td style = "padding-left:5px;"><input type="text" name="projectid" ></td></tr>
	<tr><td align = "center">Document Name:</td><td style = "padding-left:5px;"><input type="text" name="docname"></td></tr>
   	<tr><td align = "center">Remarks:</td><td style = "padding-left:5px;"><input type="text" name="remarks"></td></tr>
		
	<tr><td align="center">File:</td><td style="padding-left:5px;"><input type="text" name="uploadfile" ><a href = "Browse"></a></td></tr>
		

	</table><tr><td align = "center">


	<td colspan="2" align="right"><input type="submit" value ="Submit"/>
	<colspan="2" align="right"><input type="reset" value ="Reset"/></td></tr>
	</form>	
<?php

}
?>
</body>

</html>
printscreen.doc (277 KB)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.