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

JQuery UI Datepicker：创建一个可点击的链接

2 个答案: