Member Avatar for thegreatdanton

Im having a problem trying to combine a datepicker with a form that is displayed with a lightbox.

With out the lightbox effect, the form works with the datepicker.

when the lightobx effect is implemented, the datepicker will not work.
below is the code for the form with the date picker.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar.compats.js"></script>
<script type="text/javascript" src="calendar.rc4.js"></script>

  <script type="text/javascript">
    window.addEvent('domready', function() {  myCal = new Calendar({ date: 'Y/m/d' }); });

 </script>
</head>
<body>

<p align="left"><label for="checkout">Checkout:*</label><input id="date" name="date" type="text" onfocus="myCal" title="Plese enter your check-out dates"  class="required check-out dates" /></p>


</body>
</html>

the code for the lightbox form is as follow:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="lightbox-form.js"></script>
<style type="text/css">#maindiv {height:450px} textarea {vertical-align:text-top;}</style>
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
   newwindow=window.open(url,'name','height=150,width=250');
   if (window.focus) {newwindow.focus()}
   return false;
}

// -->
</script>
<form method="post" action="thanks2.php" target="_parent" id='myFormlightbox'>
<table width="85%" cellspacing="1" cellpadding="1" align="center"> 
<tr valign="middle"> 								
<td width="50%">Check-in Date: (YYYY-MM-DD)</td> 									
<td width="50%"><input id="checkin" name="checkin" title="Check-in date?" type="text" class="required check-in dates" /> 									</td>
</tr>
</table>						
</form> 
					
<script type="text/javascript"> 
				
window.addEvent('domready', function(){
var myFormValidation = new Validate('myFormlightbox',{
errorClass: 'green'
});
});
</script>

attempting to combine these two does not work....
is this a common problem, can anyone shed any l ight on this?

  • 1 Contributor
  • 1 Reply
  • 98 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by thegreatdanton
Member Avatar for thegreatdanton

I have the problem rectified to a certain extent.

I have a checkin date, and a checkout date on my form, which i want both to have a datepicker form.

I have inputed the code for the datapicker along with the relevant links to the js files involved.
Currently, i have the datapicker operating for the checkin date, however it will not function for the check-out date.

the code is below:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar.compats.js"></script>
<script type="text/javascript" src="calendar.rc4.js"></script>

 <script type="text/javascript">
    window.addEvent('domready', function() {  myCal = new Calendar({ date: 'Y/m/d' }); });

 </script>


<tr valign="middle">
  <td width="50%">Check-in Date: (YYYY-MM-DD)</td>
   <td width="50%">
<input id="date" name="checkin" type="text" onfocus="myCal" title="Check-in date?"  class="required check-in dates" />
   </td>
     </tr>                     
<tr valign="middle">
<td width="50%">Check-out Date: (YYYY-MM-DD)</td>
<td width="50%">
<input id="date" name="checkout" type="text" onfocus="myCal" title="Check-out date?"  class="required check-out dates" />
</td>
</tr>

is there any reason why this is occurring? I would appreciate any help.

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.