Ok, so I'm new to ASP.NET MVC and JQuery.
I have followed the following example to the letter, and I'm not able to get the datepicker working:
http://codesprouts.com/post/Creating-A-DatePicker-Extension-In-ASPNet-MVC.aspx
Can anyone tell me if there are any ticks or gotchas with this?
Bernard.
Use jquery hosted by google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"> </script>
You will also need to link to your desired css.
$().ready(function()
{
$('#from').datepicker({ dateFormat:'yy-mm-dd' });
});
<html>
...
<input id="from" class="date-field" name="from" type="text" >
Without more specific info it's hard to tell what's going wrong.
One obvious thing to get you started, make sure that the src tags for your script files are correct. The filename name of the jquery-ui .js file changes if you download a standard or custom version, so it's worth double checking that the script tags in your code match the names of the files. The 'Net' tab of the firebug addon for Firefox is a real help for quickly spotting files your page can't find - it highlights any unfound files in red - generally saves a lot of time.
See if you can get the datepicker working first in HTML only. That way you can eliminate errors introduced by incorrect file name in src tags, etc. Once you have that working you should be able to add it to the MVC solution the article describes.
I've had difficulty in the past using the jQuery datepicker when I was using the entire jquery UI css in one file. what I ended up doing, and what seemed to work for me, was to include the different jQuery UI CSS files separately, as needed, in my page or master page. When I included the datepicker in a separate CSS file, it worked.
YMMV
One thing I found is if your id has square brackets or dots, then datepicker wont work. Try to replace them with under score or something else.
Tabs
UL.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}
UL.tabNavigation LI {
display: inline;
}
UL.tabNavigation LI A {
padding: 3px 5px;
background-color: #ccc;
color: #000;
text-decoration: none;
}
UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover {
background-color: #333;
color: #fff;
padding-top: 7px;
}
UL.tabNavigation LI A:focus {
outline: 0;
}
div.tabs > div {
padding: 5px;
margin-top: 3px;
border: 5px solid #333;
}
div.tabs > div h2 {
margin-top: 0;
}
#first {
background-color: #f00;
}
#second {
background-color: #0f0;
}
#third {
background-color: #00f;
}
.waste {
min-height: 1000px;
}
-->
</style>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="CSS/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
Date:
Download the js files from JQUERY and place them in a local folder on your machine, if you are using Visual Studio simply drag the file onto your designer surface. Don't forget to link the CSS file as well. What I do for every project is from my download location I add the js files into a folder called Scripts in my project, and css files in a folder called CSS.