I’m trying to assign the Jquery datepicker to an aspx page, but no matter how hard I try the Jquery just doesn’t seem to load. This is my pages code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Movie Form</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; line-height: -1; font-family: 'Arial Rounded MT', Verdana, Tahoma, sans-serif;}
body {background: white url('bg.jpg') top left repeat-x;}
h1 {color: white; margin-bottom: 8px;}
#wrapper {margin: 0 auto; width: 450px;}
#content {margin: 100px 0 20px 0; padding: 40px 20px; border: 10px solid white; width: 380px; background: #4ec0e5;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYzBlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMjk2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top, #4ec0e5 0%, #3296b6 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec0e5), color-stop(100%,#3296b6));background: -webkit-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -o-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -ms-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: linear-gradient(top, #4ec0e5 0%,#3296b6 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ec0e5', endColorstr='#3296b6',GradientType=0 );-moz-border-radius: 52px;border-radius: 52px;}
.rqd {color: #f00;}
#buttons{margin-top: 20px;text-align: center;}
#submit, #reset {-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}
#submit:hover, #reset:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');background-color:#dfdfdf;}
#ValidationSummary1 ul{list-style: none; margin: 10px 0 0 10px; font-size: smaller;color: white;}
#ValidationSummary1 li{border-bottom: 1px solid red;}
#resultLbl{margin: 10px 0 0 10px; font-size: smaller;color: white;}
</style>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="content" class="gradient">
<h1>Movie <strong>Form</strong></h1>
<asp:Table ID="Table1" runat="server" Width="380px">
<asp:TableRow>
<asp:TableCell Width="45%">
<span class="rqd">*</span> <asp:Label ID="fNameLbl" runat="server" Text="First Name"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="fName" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="fNameRqd" ControlToValidate="fName" runat="server" Text=" <img src='err.png' alt='*' title='Please enter your first name'>" ErrorMessage="Please enter your first name"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="fNameReg" ControlToValidate="fName" runat="server" ValidationExpression="^[\s\S]{0,40}$" Text=" <img src='err.png' alt='*' title='Your name can be no more than 40 characters'>" ErrorMessage="Your name can be no more than 40 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="address1lbl" runat="server" Text="Address Line 1"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="address1" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="address1Rqd" runat="server" ControlToValidate="address1" Text=" <img src='err.png' alt='*' title='Please enter your address'>" ErrorMessage="Please enter your address"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="address1Reg" ControlToValidate="address1" runat="server" ValidationExpression="^[\s\S]{0,120}$" Text=" <img src='err.png' alt='*' title='Your address can be no more than 120 characters'>" ErrorMessage="Your address can be no more than 120 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="townlbl" runat="server" Text="Town/City"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="town" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="townRqd" runat="server" ControlToValidate="town" Text=" <img src='err.png' alt='*' title='Please enter your Town/City'>" ErrorMessage="Please enter your Town/City"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="townReg" ControlToValidate="town" runat="server" ValidationExpression="^[\s\S]{0,76}$" Text=" <img src='err.png' alt='*' title='Your Town/City name can be no more than 76 characters'>" ErrorMessage="Your Town/City name can be no more than 76 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="postcodelbl" runat="server" Text="Postcode"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="postcode" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="postcodeRqd" runat="server" ControlToValidate="postcode" Text=" <img src='err.png' alt='*' title='Please enter your Postcode'>" ErrorMessage="Please enter your Postcode"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="postcodeReg" runat="server" ControlToValidate="postcode" ValidationExpression="\d{4}" Text=" <img src='err.png' alt='*' title='Your Postcode can only be 4 digits long'>" ErrorMessage="Your Postcode can only be 4 digits long"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="emaillbl" runat="server" Text="Email"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="email" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="emailRqd" runat="server" ControlToValidate="email" Text=" <img src='err.png' alt='*' title='Please enter your email'>" ErrorMessage="Please enter your email"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="emailReg" runat="server" ControlToValidate="email" ValidationExpression="^(?=.{0,100}$)\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" Text=" <img src='err.png' alt='*' title='Please enter a valid email address less than 100 characters long'>" ErrorMessage="Please enter a valid email address less than 100 characters long"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="phonelbl" runat="server" Text="Phone No."></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="phone" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="phoneReq" runat="server" ControlToValidate="phone" Text=" <img src='err.png' alt='*' title='Please enter your phone number'>" ErrorMessage="Please enter your phone number"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="phoneReg" runat="server" ControlToValidate="phone" ValidationExpression="\d{0,14}" Text=" <img src='err.png' alt='*' title='Your phone number can be no longer than 14 digits'>" ErrorMessage="Your phone number can be no longer than 14 digits"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="doblbl" runat="server" Text="D.O.B"></asp:Label> <span style="font-style: italic; font-size: x-small;">(dd/mm/yyy)</span>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="dob" runat="server" Width="140px" CssClass="datePicker"></asp:TextBox>
<asp:RequiredFieldValidator ID="dobRqd" runat="server" ControlToValidate="dob" Text=" <img src='err.png' alt='*' title='Please enter your Date of Birth'>" ErrorMessage="Please enter your Date of Birth"></asp:RequiredFieldValidator>
<asp:CompareValidator id="dateValidator" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="dob" Text=" <img src='err.png' alt='*' title='Please enter a valid date in the format dd/mm/yyy'>" ErrorMessage="Please enter a valid date in the format dd/mm/yyy"></asp:CompareValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="movielbl" runat="server" Text="Favourite Move"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="movie" runat="server" Width="140px">
<asp:ListItem>We Bought a Zoo</asp:ListItem>
<asp:ListItem>The Breakfast Club</asp:ListItem>
<asp:ListItem>Puss in Boots</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="movieReq" runat="server" ControlToValidate="movie" Text=" <img src='err.png' alt='*' title='Please pick a movie'>" ErrorMessage="Please pick a movie"></asp:RequiredFieldValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="genderlbl" runat="server" Text="Gender"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="gender" runat="server" Width="140px">
<asp:ListItem Value="male">Male</asp:ListItem>
<asp:ListItem Value="female">Female</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="genderReq" runat="server" ControlToValidate="gender" Text=" <img src='err.png' alt='*' title='Please pick a gender'>" ErrorMessage="Please pick a gender"></asp:RequiredFieldValidator>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div id="buttons">
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="Submit_Click" /> <input type="reset" name="reset" value="Clear" id="reset" />
</div>
<asp:Label ID="resultLbl" runat="server"></asp:Label>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</div>
</form>
<script>
$(function () {
$(".datePicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
dateFormat: 'dd-mm-yy'
});
})();
</script>
</body>
</html>
CS File
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
resultLbl.Text = "Congratulations this is valid data!";
}
}
}
All the files are right, they are all there, it just won’t show. Any ideas?
I also tried the id in the script at the bottom as #<%= dob.ClientID %> as some people suggested but it just will not load.
Have you tried declaring the jquery script reference first?
Update! As I said in the comments below, I got it working, just had to remove the line: