Response title
This is preview!
Datepicker will not display
in Using jQuery Plugins
•
3 months ago
Hi,
I've spent a few hours on this now and I can't seem to get the datepicker to display. I've done a bit of research and tried a few different fixes and none seem to work.
You can view it here.
I'm really not sure what it could be! I've tried removing the validator and that doesn't seem to work. I REALLY need help with this!! I really appreciate any help. I've posted the link as well because I'm hearing it could be all kinds of things wrong. Thank you!
- <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();
});
</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>
1
