JQuery的UI日期選擇器：製作一個可點擊的鏈接

Question

遺憾的英語不好

有必要對我來說，這在鏈接下單擊（示例：28 April 2010），其下的jquery.datepicker打開

要使用<a></a>代替<input type="text" />

Answer 1

<a class="date-picker" href="#">10/10/2010</a> 

$(function() { 
function onSelect(date) { 
    alert(date); 
} 

function openDatePicker() { 
    element = $(this) 
    offset = [element.offset().left, element.offset().top + element.height()] 
    element.datepicker("dialog", $(this).text(), onSelect, {}, offset) 
    } 

    $(".date-picker").click(openDatePicker); 
}); 

Answer 2

在一個MVC應用程序，你的代碼可能是：

XML：

<div class="editor-field"> 
     <%= Html.TextBoxFor(model => model.DOB, new { @class = "date-picker" })%> 
     <%= Html.ValidationMessageFor(model => model.DOB, "*") %> 
    </div> 

這將呈現爲（這是它會是什麼樣子作爲一個普通的老的.html）：

<div class="editor-field"> 
    <input class="date-picker hasDatepicker" id="DOB" name="DOB" type="text" value=""> 
</div> 

的jQuery（假設你擁有jQuery庫和jQuery UI庫中如下圖所示的位置）：

<script id="script3" src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script id="script4" src="/jQueryUI/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 
<script id="script2" src="/jQueryUI/ui/jquery.ui.core.min.js" type="text/javascript"></script> 
<script id="script1" src="/jQueryUI/ui/jquery.ui.datepicker.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.date-picker').live('click', function() { 
       $(this).datepicker({ showOn: 'focus', changeMonth: true, changeYear: true, yearRange: "-130:+0" }).focus(); 
      }); 
     }); 
</script> 

在上面的代碼，你有很多的配件設定，例如，顯示最後130年（出生日期）和按鈕/下拉列表，讓陳月份和年份。

您可以找到這些設置在記載： jQuery Date Picker Documentation