0

Hi,
I'm having issues getting the datepicker to display. I've done quite a bit of research on it and found other people have had the same problem but I tried their fixes and it still doesn't work.

The page is here http://www.purpleblaze.com.au/test%202/

I'm really struggling on this and I've spent quite a few hours on it. I've done exactly as the website says and it still doesn't work. I also have a validator on there but I tried removing that too to see if it worked but it didnt.

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>I would like to enquiry</title>

<link rel="stylesheet" type="text/css" href="css/enquiry.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css">

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

<script>
$.validator.setDefaults({
submitHandler: function() { alert("Enquiry Successful"); }
});
$().ready(function() {
// validate the comment form when it is submitted
// validate signup form on keyup and submit
$("#commentForm").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
phone_number: {
required: true,
digits: "true",
maxlength: 10
},
agree: "required"
},

messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
phone_number: {
required: "Please enter a phone number",
minlength: "Your phone number must be a maximum of 10 numbers"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});


$(document).ready(function(){         
 $("#datepicker").datepicker(); 
 $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');   
 }); 


</script>

</head>
       
<body>
	<form method="post" id="commentForm" action="">

	<h2>Make an enquiry</h2>
	
	<div style="float:left; margin-right:20px; width:400px;">
	<h3>Row highlighting</h3>
	<div class="contentA">
		<div class="row">
			<div class="left">First name *</div>

			<div class="right"><input id="firstname" name="firstname" type="text" size="27" /></div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="left">Last name *</div>
			<div class="right"><input id="lastname" name="lastname" type="text" size="27" /></div>
			<div class="clear"></div>
		</div>

		<div class="row">
			<div class="left">Email *</div>
			<div class="right"><input name="email" type="email" size="27" class="required email" /></div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="left">Phone *</div>
			<div class="right"><input name="phone_number" type="tel" size="27" maxlength="10" /></div>
			<div class="clear"></div>
		</div>
	</div>
	<hr />
		<div class="contentA">
		<div class="row">
			<div class="left">Departure Date</div>
			<div class="right"><input id="datepicker" type="text" /> </div>
            <div class="clear"></div>
                        
		</div>
		<div class="row">
			<div class="left">Returning Date</div>
			<div class="right"><input name="Text1" type="text"/></div>
			<div class="clear"></div>
		</div>
		<div class="row">

			<div class="left">Destination</div>
			<div class="right"><input name="Text1" type="text" class="text" id="autocomplete"/></div>
			<div class="clear"></div>
		</div>

	</div>
	<hr />
	<input name="submit" type="submit" value="submit" />
	</div>
	<div style="float:left; margin-right:20px;"> 

	
</form>
</body>

</html>
3
Contributors
3
Replies
6
Views
5 Years
Discussion Span
Last Post by baig772
0

The problem is in your document.ready script:

$("#datepicker").datepicker();

This is returning an error that it is not a function. I'm not sure how the actual call should be, but check the documentation on that.

0

Actually it looks like your UI js does not have datepicker included. Get an updated UI js code with datepicker included and it should be fine.

0

This problem occurs if your jQuery is not included correctly,
also confirm the inclusion of your jQuery file

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.