当前位置：文江博客话题详情

JQuery UI Datepicker：制作可点击的链接

发布于 2024-09-27 00:16:15 字数 199 浏览 3 评论 0原文

对不起，英语不好

对我来说，点击链接（示例：2010年4月28日），在其下面有< strong>jquery.datepicker 打开

使用而不是

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难以启齿的温柔 2024-10-04 00:16:15

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

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

回复收藏 0 原文

ゞ记忆︶ㄣ 2024-10-04 00:16:15

在 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 日期选择器文档

In an MVC app, your code could be:

XML:

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

Which would render as (this is what it would look like as a plain old .html):

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

jQuery (presuming you have the jquery library and jquery ui libraries in the locations shown below):

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

In the above code, you have a number of accessory settings, eg, to show the last 130 years (for date of birth) and buttons/drop down lists to allow changing month and year.

You can find these settings documented at:
jQuery Date Picker Documentation

回复收藏 0 原文

~没有更多了~