SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: jQuery DatePicker question

  1. Oct 27, 2010 09:02 #1
    sathishauit
    sathishauit is offline
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery DatePicker question

    Code:
    {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
    Last edited by ScallioXTX; Oct 27, 2010 at 10:20.
  2. Oct 27, 2010 17:22 #2
    clairs
    clairs is offline
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem here is that you can't set an id/class which begins with a digit
  3. Oct 27, 2010 23:52 #3
    sathishauit
    sathishauit is offline
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by clairs View Post
    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
  4. Oct 28, 2010 01:30 #4
    ScallioXTX
    ScallioXTX is online now
    Do. Or do not. There is no try silver trophy
     SitePoint Award Recipient ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,340
    Mentioned
    85 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by sathishauit View Post
    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?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy
  5. Oct 28, 2010 01:40 #5
    sathishauit
    sathishauit is offline
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    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
  6. Oct 28, 2010 19:13 #6
    clairs
    clairs is offline
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
  7. Oct 29, 2010 05:36 #7
    sathishauit
    sathishauit is offline
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript

    html id=108 then how we use this id for javascript validation and some other purpose it's possible or not
  8. Oct 29, 2010 12:02 #8
    clairs
    clairs is offline
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's possible
« Previous Thread | Next Thread »

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules