0

我正在尝试编写一个 MVC.NET 网站，并且我想使用datepickerjQuery 中的组件。要使用 jQuery，我在布局页面上使用以下代码：

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Content/jquery.ui.all.css")" type="text/css" />
<link href="@Url.Content("~/Content/jquery.ui.datepicker.css")" type="text/css" />
</head>

在我想使用的页面上，我datepicker使用以下代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#FromDate").datepicker({ dateFormat: 'dd/mm/yy' });
    });
</script>
...
<div class="editor-field-search">
     <label for="fromDate">From date:</label>
     <input type="text" id="FromDate" name="FromDate" value=""/> 
</div>

但是datepicker以一种奇怪的方式显示：

日期选择器的显示方式

我已经用谷歌搜索并尝试修复，但没有找到解决问题的方法。我究竟做错了什么？

4

4 回答 4

3

这是一个纯粹的 CSS 参考问题。您没有正确引用 CSS。使用带有 ASP.NET MVC 的 HTML5 和 jQuery UI Datepicker Popup Calendar运行我的示例，并使用这些F12工具并与您的代码进行比较，以找出未使用 CSS 的原因。– Rick.Anderson-at-Microsoft.com 注释掉我的 CSS 参考，你会得到同样格式错误的日历。这些F12工具非常适合解决这个问题。

于 2012-04-04T18:02:08.933 回答
0

我假设你已经从 jQuery 的ThemeRoller下载了一个主题......可以尝试几件事：

  1. 使用下载中包含的 jQuery 和 jQuery UI Javascript 版本以确保其兼容（在下载的 js 目录中）。看起来 jQuery 1.7.1 是 jQuery UI 下载中包含的最新版本，并且您的页面上有 jQuery 1.7.2。
  2. 试试 css\custom-theme 目录中的 jQuery UI css 文件 - 它包含所有 jQuery 组件所需的所有 css。还要检查以确保图像被复制到应用程序中的 jQuery css 文件旁边，就像它在自定义主题目录中一样。

jQuery 入门指南

于 2012-04-06T00:49:33.900 回答
0

如果您在此处复制粘贴源代码，我认为您缺少“>”

<label for="fromDate">From date:</label**>**
     <input type="text" id="FromDate" name="FromDate" value=""/>
于 2012-04-04T14:13:43.887 回答
0

如果关闭label标签，它会起作用吗？

<label for="fromDate">From date:</label>
                                       ^
于 2012-04-04T14:17:26.003 回答