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>