jQuery DatePicker question


{php}
$objTime = new TimeZone();
$Time = $objTime->CollectTime();
{/php}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>To-n-fro Taxi</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="js/lib/jquery.js" type="text/javascript"></script>  
		<script src="js/jquery.validate.js" type="text/javascript"></script>
		
		<script src="js/lib/jquery.js" type="text/javascript"></script>  
		<script src="js/jquery.validate.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<link   href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
		<style type="text/css">
		 {literal}
		  body {
		  margin:0;
		  padding:0;
		}
		{/literal}
		</style>
		
		<script type="text/javascript">
		
		{literal} 

			   $(function() {
				$("#104").datepicker({
					defaultDate: "+1w",
					changeMonth: true,
					changeYear: true,
					changedateFormat:true,
					yearRange: '2000:2025',
					numberOfMonths: 1,
					showOn: 'button', buttonImageOnly: true, buttonImage: 'images/cal.jpg',
					dateFormat:'yy/mm/dd'
					//var myOldString = "dd-mm-yy",
					//var dateFormat = myOldString.replace("dd-mm-yy", dd/mm/yy)
					
					//dateFormat:'dd/mm/yy',
					//dateFormat:('dmy','/')
					
					//$.datePicker.setDateFormat('dmy','/'); // default - UK style
				   // $.datePicker.setDateFormat('ymd','-'); // unicode
				   // $.datePicker.setDateFormat('dmy','.'); // german 
					 });
			});
		
		  function Pickup1areaSelect()
		 {
			 //alert("hi");
	
			Pickup1areaId=document.bookingdetails.Pickup1areaname.options[document.bookingdetails.Pickup1areaname.selectedIndex].value; 
			
			Pickup2areaId=document.bookingdetails.Pickup2areaname.value;
			
			Droppoint1areaId=document.bookingdetails.DropPointareaname.value;
		   
			Droppoint2areaId=document.bookingdetails.Droppoint2areaname.value; 
			
			//location.href='bookingdetails.php?Pickup1areaId='+Pickup1areaId;
			location.href='bookingdetails.php?Pickup2areaId='+Pickup2areaId+'&Pickup1areaId='+Pickup1areaId+'&Droppoint1areaId='+Droppoint1areaId+'&Droppoint2areaId='+Droppoint2areaId;                                                                                                             
		 
		 }
	   
			function Pickuppoint2areaselect()
		 {
			
			Pickup1areaId=document.bookingdetails.Pickup1areaname.value;
			Droppoint1areaId=document.bookingdetails.DropPointareaname.value;
			Pickup2areaId=document.bookingdetails.Pickup2areaname.options[document.bookingdetails.Pickup2areaname.selectedIndex].value; 
			Droppoint2areaId=document.bookingdetails.Droppoint2areaname.value;
			location.href='bookingdetails.php?Pickup2areaId='+Pickup2areaId+'&Pickup1areaId='+Pickup1areaId+'&Droppoint1areaId='+Droppoint1areaId+'&Droppoint2areaId='+Droppoint2areaId;      
		 
		 }
		 
		
		   function Droppoint1areaselect()
		 {
			 
		  
			Droppoint1areaId=document.bookingdetails.DropPointareaname.options[document.bookingdetails.DropPointareaname.selectedIndex].value; 
			Pickup1areaId=document.bookingdetails.Pickup1areaname.value;
			Pickup2areaId=document.bookingdetails.Pickup2areaname.value;
			Droppoint2areaId=document.bookingdetails.Droppoint2areaname.value;    
			//location.href='bookingdetails.php?Droppoint1areaId='+Droppoint1areaId;                                                                           
			location.href='bookingdetails.php?Pickup2areaId='+Pickup2areaId+'&Pickup1areaId='+Pickup1areaId+'&Droppoint1areaId='+Droppoint1areaId+'&Droppoint2areaId='+Droppoint2areaId;                                                                                                                        
		 }
		 
		 function Droppoint2areaselect()
		 {
			 
		  
			Droppoint2areaId=document.bookingdetails.Droppoint2areaname.options[document.bookingdetails.Droppoint2areaname.selectedIndex].value; 
			Pickup1areaId=document.bookingdetails.Pickup1areaname.value;
			Pickup2areaId=document.bookingdetails.Pickup2areaname.value;
			Droppoint1areaId=document.bookingdetails.DropPointareaname.value;
			//location.href='bookingdetails.php?Droppoint2areaId='+Droppoint2areaId; 
			location.href='bookingdetails.php?Pickup2areaId='+Pickup2areaId+'&Pickup1areaId='+Pickup1areaId+'&Droppoint1areaId='+Droppoint1areaId+'&Droppoint2areaId='+Droppoint2areaId;                                                                                                                                                                                                                                                                                   
			
		 }
	   
		  {/literal}   
		   
		 </script>
	 </head>
		 
	 <body onload="myFunc();">
        <table width="1280" border="0" cellspacing="0" cellpadding="0">
            {include file='header.tpl'}
            <tr><td height="5" colspan="3"></td></tr>
            <tr>
                <td height="28" colspan="3" align="center">{$link}</td>
            </tr>
            <tr><td height="5" colspan="3" ></td></tr>
            <tr>
                <td colspan="3" align="center">
                    <table width="1234" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><img src="images/body_top.jpg" /></td>
                        </tr>
                        <tr>
                            <td align="center" style="background-color:#F0F0F0; border-left:1px solid #CBCBCB; border-right:1px solid #CBCBCB">
                                <div class="text" style="padding-bottom:15px">{$Message}</div>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="164">&nbsp;</td>
                                        <td width="777">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="197" background="images/bg.jpg" valign="top"><img src="images/customer.jpg" /></td>
                                                    <td width="580" rowspan="3">
                                                        <div style="border-bottom:1px solid #C7C7C7; background:#FFFFFF; border-right:1px solid #C7C7C7; border-top:1px solid #C7C7C7">
                                                           <form method="post" action="bookingdetails.php?level=1" name="bookingdetails" id="bookingdetails">                                                                                                                                                                                                                                                                                  
				<div style="line-height:40px">
				<div style="align:center" class="text">{$welcomeMessage}</div>  
				
				<div id="keys">                                    
				   <input type="hidden" name="intBookingDetailsId" id="intBookingDetailsId"  size="45" value="{$booking.intBookingDetailsId}"/>
				  <input type="hidden" name="CompanyId" id="CompanyId"  size="45" value="{$booking.intCompanyId}" />
				</div>
			   
				<div id="103" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="areaname" >{$LabelsList.103}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;<input type="text" name="103" id="103" value ="{$customernumber}" class="text_box" /></td>  
						
						</tr>
					</table>
				</div>
				
				 <div id="104" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.104}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>

							<td width="50%" align="left">&nbsp;<input type="text" name="Bookingdate" id="104" value ="{$booking.dtBookingDate}" class="text_box" /><small>yyyy/mm/dd</small></td>  
							
						</tr>
						
					</table>
				</div>
				
				
				  <div id="105" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="105" >{$LabelsList.105}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;<input type="text" name="105" id="105" value ="{$time}" class="text_box" /></td>  
						
						</tr>
					</table>
				</div>
				
				
				 <div id="106" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="106" >{$LabelsList.106}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
						   
							<select name="106" id="106">
							<option value="">Customer Name </option>  
							 {foreach from=$customerlist  key=arealistkey item=areaslist}
							  {if ($arealistkey == $booking.intCustomerName)}
							  <option selected value="{$arealistkey}">{$areaslist}</option>
							  {else}
							  <option value="{$arealistkey}">{$areaslist}</option>
							   {/if}
							  {/foreach}  
							 </select>      
						  
						</tr>
					</table>
				</div>
				
				
				<div id="107" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.107}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;<input type="text" name="107" id="107" value ="{$booking.dtPickupTime}" class="text_box" /></td>  
						
						</tr>
					</table>
				</div>
				
				 <div id="108" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
						<td width="50%" align="right"><label for="booking date" >{$LabelsList.108}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
						<td width="50%" align="left">&nbsp;
						<select name="Pickup1areaname" id="Pickup1areaname" onchange="Pickup1areaSelect()">
						<option value="">Area Name </option>                                                                                                                                                                                                                                  
						{foreach from=$arealist  key=arealistkey item=areaslist}
						 
						{if ($arealistkey == $Pickup1areaId) || ($arealistkey == $booking.intPickupPoint1)}
						<option selected  value="{$arealistkey}">{$areaslist}</option> 
						{else}
						<option value="{$arealistkey}">{$areaslist}</option>
						{/if} 
						
					   {/foreach}
					   
					   </select>
						
					   </tr>
					</table>
				</div>
				
				  <div id="109" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.109}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="109" id="109"> 
							<option value="">Street Name </option>
							{foreach from=$pickup1streetname  key=arealistkey item=areaslist}
							{if $areaslist.intStreetId == $booking.intPickupPoint1StreetNames}
							<option selected value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{else}
							<option value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{/if}
							{/foreach}   
						   	 </select>      
					   
						</tr>
					</table>
				</div>
				
				  <div id="110" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.110}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="Pickup2areaname" id="Pickup2areaname" onchange="Pickuppoint2areaselect()">
							<option value="">Area Name </option> 
							{foreach from=$arealist  key=arealistkey item=areaslist}
							{if   ($arealistkey == $Pickup2areaId) || ($arealistkey == $booking.intPickupPoint2)}
							<option selected  value="{$arealistkey}">{$areaslist}</option> 
							{else}
							<option value="{$arealistkey}">{$areaslist}</option>
							{/if}
							{/foreach}
							
							 </select>      
					   
						</tr>
					</table>
				</div>
				
				  <div id="111" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.111}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="111" id="111">
							<option value="">Street Name </option> 
							{foreach from=$pickup2streetname  key=arealistkey item=areaslist}
							{if $areaslist.intStreetId == $booking.intPickupPoint2StreetNames}
							<option selected value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{else}
							<option value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{/if}
							 {/foreach}  
							 
							 </select>      
					   
						</tr>
					</table>
				</div>
				
				<div id="112" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.112}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="DropPointareaname" id="DropPointareaname" onchange="Droppoint1areaselect()">
							<option value="">Area Name </option> 
							{foreach from=$arealist  key=arealistkey item=areaslist}
							{if   ($arealistkey == $Droppoint1areaId) || ($arealistkey == $booking.intDropPoint1)}
							<option selected  value="{$arealistkey}">{$areaslist}</option> 
							{else}
							<option value="{$arealistkey}">{$areaslist}</option>
							{/if}
							{/foreach}
							
							 </select>      
					   
						</tr>
					</table>
				</div>
				
				
				  <div id="113" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.113}<span style="color:red;font-size: 10px">*</span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="113" id="113">
							<option value="">Street Name </option>
							{foreach from=$droppoint1streetname  key=arealistkey item=areaslist}
							{if $areaslist.intStreetId == $booking.intDropPoint1StreetNames}
							<option selected value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{else}
							 <option value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{/if}
							{/foreach}  
							 
							 </select>      
					   
						</tr>
					</table>
				</div>
				
				  <div id="114" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.114}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="Droppoint2areaname" id="Droppoint2areaname" onchange="Droppoint2areaselect()">
							<option value="">Area Name </option>  
							
							{foreach from=$arealist  key=arealistkey item=areaslist}
							{if   ($arealistkey == $Droppoint2areaId) || ($arealistkey == $booking.intDropPoint2)}
							<option selected  value="{$arealistkey}">{$areaslist}</option> 
							{else}
							<option value="{$arealistkey}">{$areaslist}</option>
							{/if}
							{/foreach}
							
							 </select>      
					   
						</tr>
					</table>
				</div>
				
				
				  <div id="115" style="border:0px solid">
					<table cellspacing="0" cellpadding="0">
						<tr>
						   
							<td width="50%" align="right"><label for="booking date" >{$LabelsList.115}<span style="color:red;font-size: 10px"></span></label>&nbsp;</td>
							<td width="50%" align="left">&nbsp;
							<select name="115" id="115">
							<option value="">Street Name </option>
							{foreach from=$droppoint2streetname  key=arealistkey item=areaslist}
							{if $areaslist.intStreetId == $booking.intDropPoint2StreetNames}
							<option selected value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{else}
							<option value="{$areaslist.intStreetId}">{$areaslist.strstreetname}</option>
							{/if}
							 {/foreach}  
						   
							 </select>      
					   
						</tr>
					</table>
				</div>
			    <div id="ADDMOAR"  style="border:0px solid">
                         <table cellspacing="0" cellpadding="0" border="0">
                         <tr>
                         <td width="90%" align="right"><label for="addmorelist">Add More BookingList List</label>&nbsp;</td>
                         <td width="60%" align="left">&nbsp;<input type="checkbox" id="chaddlist" name="chaddlist" value="1"></td>
                         </tr>
                         </table>
                 <div>   
				<div style="height:40px;">
				</div>
				<div>
				 <input name="submit_form" type="image" src="images/save.jpg" border="0" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="images/cancel.jpg" border="0" />
				</div>
				  </div>    
			   </form>
					  </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td background="images/bg.jpg">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td valign="bottom" background="images/bg.jpg"><img src="images/lft_btm.jpg" /></td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td width="293" align="center" valign="top">
                                            <div style="background:url(images/road.jpg) repeat-y; width:119px; height:700px">&nbsp;</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td><img src="images/body_btm.jpg" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="28" colspan="3"></td>
            </tr>
            {include file='footer.tpl'}
        </table>
    </body>
</html>

hi i want to change the jQuery date picker id=104.but i change this value na
$(function() {
$(“#104”).datepicker({

i cant get calender on click event please help me…how do i give 104 id in the date picker

I think the problem here is that you can’t set an id/class which begins with a digit

no if i will give 10 means it will accept

You mean you have an element with ID 10 and the DatePicker works for that? If so, are you sure you have an element with ID 104?

i will give div id=“date” name=“104” and id=“104” this format means it wil working
… but i want to div id also same 104 means the calender will be always visible… please tell me solution for this issue

You already have an element of id 104 - remove that id and it works

As an aside, while looking at your code I’ve noticed you’re loading jquery three times (and jquery.validate.js two times) - you don’t need to do that

html id=108 then how we use this id for javascript validation and some other purpose it’s possible or not

Yes, it’s possible