没有工作

Question

林相当新的这个jQuery选择器数据，请包涵...... 我使用教程@http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html 允许用户从日历中选择日期，我似乎

但是不能得到它的工作可能会有人请告知，如果我要对这个错误的方式...

“jquery.datePicker.js & datePicker.css”可以在靠近页面顶部的下载... http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

1. 拷贝到我的标签中的“•jquery.datePicker.js”的代码在我看来
2. 复制datePicker.css代码到我的CSS文件

3. 以下内容粘贴到我的视图页面的顶部：

   <!-- 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> 
   

这不工作... IV试着做第一个演示，并与

$(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; 
    } 

replacting我 <script>标签内的数据名为.js

有人可以告诉我我做错了什么吗？

Answer 1

资源添加

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; }​ 

检查提琴手我已经设置了演示那里也记得要检查我已经添加

http://jsfiddle.net/imranpk/DNFuB/4/

Answer 2

感谢您的答复的资源，我知道了去 不得不...添加以下内容到我的布局页面

<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" /> 

---

然后在我的.cshtml文件中，我在编辑器后添加了（下面）ref。

<script> 
      $("#HolidayDate").addClass('date-pick'); 
      $('.date-pick').datePicker(); 
</script>