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>

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.

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.

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

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.