我无法让日期选择器工作

Question

我需要一个显示日期选择器的字段。我按照 JQuery UI 文档给出的示例并没有设法让它工作。我有我的文本字段的 html 是：

<div class="editor-field">
                <input type = "text" name = "DatePublished" id = "Published" />
                <%= Html.ValidationMessage("DatePublished" ,"*") %>
            </div>

这个 HTML 在局部视图中，我们称之为 pv.ascx，它在主页中被称为模态框：

<div id = "ModalBox">
                <% Html.RenderAction("pv", "Example"); %>
            </div>

问题是，每当我进入主页面时，我都会尝试调用 datepicker 创建，并在我的 javascript 文件 app.js 中执行此操作：

 $().ready(function() {

    var place = window.location.pathname;
    var placesplit = place.split("/");
    //Depending on the location we are on, we execute different subroutines
    $('#Published').datepicker();

});

但是当我专注于文本字段时没有任何反应。怎么了？难道是从局部视图调用它不起作用？

谢谢大家， 维克托

编辑：我已经更新了 js，所以它显示了我现在添加的内容。这很奇怪，但是 $('#Published').datepicker();即使在其他页面中没有这样的文本字段，也不会在 firebug 上生成错误。这怎么可能发生？我也尝试了 chrome 调试器，也没有错误，它看起来就像是直接忽略了该方法。然后它只出现在我的脑海中一个愚蠢的问题，我是否必须在我的 site.master 中引用某种 datepicker.js 库？因为我尝试了您告诉我的方法并且方法就在那里，只是它对此无能为力。是不是很奇怪？

EDIT2：我一直在环顾四周，发现使用带有模态对话框的日期选择器存在问题......我发现：

1. Add this to the stylesheet

#ui-datepicker_div, .ui-datepicker { z-index: 1000; /* must be > than
popup editor (950) */ }

2. Modify the attribute of the dialog zIndex to 1:

$('#myDialog').dialog({
                        title: 'Datepicker on Dialog',
                        zIndex: 1
                }); 

但它仍然对我不起作用......

Answer 1

无论是从局部视图还是普通视图调用，jQuery 都可以正常工作——它最终都会呈现为文本。

运行故障排除想法列表：

1) 将显示此文本框的页面上是否正确引用了 jQuery？

2) 是否正确引用了您的 app.js 文件？

3) 页面上是否正确引用了 jQuery UI 的 javascript 文件？您可以通过警告函数来测试这一点：alert($.fn.datepicker)

4) jQuery UI 的所有 CSS 和图像是否都在适当的位置，或者您是否需要使用正确的 url 更新 CSS 文件才能找到图像？

5) 浏览器是否报告了任何 Javascript 错误？

6) 对 datepicker 的调用是发生在 .ready() 事件内部还是其他地方？

Answer 2

请检查

1. 如果正确引用了 jQuery 库和 jQuery ui

2. 确保$('#Published').datepicker(); 在里面

   jQuery(document).ready(function () { });

3. 是否正确引用了您的 app.js 文件？