Jquery data picker not working - asp.net-mvc-3

Question

Im fairly new to this so please bear with...
I'm using the tutorial # http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
to allow the user to select dates from a calendar
however I can't seem to get it working could someone please advise if I am going about this the wrong way...
'jquery.datePicker.js & datePicker.css' can be downloaded at near the top of the page on...
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
Copy the code in the '•jquery.datePicker.js ' inside my tags in my view
Copy the datePicker.css code into my css file
Paste the following into the top of my view page:
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- required plugins -->
<script type="text/javascript" src="scripts/date.js"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
This does not work...iv tried doing the first demo and replacting the .js data inside my<script> tags with
$(function()
{
$('.date-pick').datePicker();
});
and then adding the following to .css
/* located in demo.css and creates a little calendar icon
* instead of a text link for "Choose date"
*/
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
/* makes the input field shorter once the date picker code
* has run (to allow space for the calendar icon
*/
input.dp-applied {
width: 140px;
float: left;
}
could someone please tell me what I am doing wrong?

Answer 1

Resources to add
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/demo.css
<form name="chooseDateForm" id="chooseDateForm" action="#">
<fieldset>
<legend>Test date picker form</legend>
<ol>
<li>
<label for="date1">Date 1:</label>
<input name="date1" id="date1" class="date-pick" /></li>
<li>
<label for="date2">Date 2:</label>
<input name="date2" id="date2" class="date-pick" />
</li>
<li>
<label for="test-select">Test select:</label>
<select name="test-select" id="test-select" style="width: 170px">
<option value="1">Test SELECT </option>
<option value="2">Doesn't shine through</option>
<option value="3">Even in IE</option>
<option value="4">Yay!</option>
</select>
</li>
</ol>
</fieldset>
</form> ​
Javascript
$('.date-pick').datePicker();
CSS
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/images/calendar.png)
no-repeat; }4 a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default; } /* makes the input field shorter once the date picker code * has run (to allow space for the calendar icon */
input.dp-applied {
width: 140px;
float: left; }​
Check the fiddler i have setup the demo there also remember to check the resources i have added
http://jsfiddle.net/imranpk/DNFuB/4/

Answer 2

Thanks for the reply, i got it going
had to...add the following to my layout page
<script src="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js")" type="text/javascript"></script>
<script src="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js")" type="text/javascript"></script>
<link href="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/demo.css")" rel="stylesheet" type="text/css" />
then in my .cshtml file I added (below) after the editor for ref.
<script>
$("#HolidayDate").addClass('date-pick');
$('.date-pick').datePicker();
</script>