沒有工作

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>