Question

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

<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以奇怪的方式显示：

The way datepicker displayed

我用谷歌搜索并尝试修复，但还没有办法解决我的问题。我做错了什么？

Answer 1

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

Answer 2

如果您复制粘贴源代码，我认为您错过了“＆gt;”

<label for="fromDate">From date:</label**>**
     <input type="text" id="FromDate" name="FromDate" value=""/>

Answer 3

如果您关闭label代码，是否有效？

<label for="fromDate">From date:</label>
                                       ^

Answer 4

我假设您已经从jQuery的ThemeRoller下载了一个主题...可以尝试一些事情：

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

jQuery Getting Started Guide

Datepicker显示不正确

4 个答案: