Datepicker显示不正确

我想写一个MVC.NET网站，我想用jQuery中的datepicker组件。为了我的布局页面上使用jQuery我使用下面的代码：Datepicker显示不正确

<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

我一派，并试图固定，但还没有找到一种方法来解决我的问题。我究竟做错了什么？

来源

2012-04-04 Ivan Mushketyk

我不是一个jQuery的主人，但人们可能需要知道什么'主编现场search'和'fromDate'样子。 – Bastardo 2012-04-04 14:14:23

editor-field-search是标准MVC.NET项目的CSS类。 fromDate是我的模型类中的一个字段，应该从此输入中获取值。 – 2012-04-04 14:25:12

Oki doki，我没有看到asp.net-mvc标签。 – Bastardo 2012-04-04 14:27:45

这是一个纯粹的CSS参考问题。您没有正确引用CSS。运行我的示例Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC并使用F12工具，并与您的代码进行比较，找出为什么您的CSS未被使用。 - Rick.Anderson-at-Microsoft.com 注释掉我的CSS参考，并得到相同的格式不正确的日历。 F12工具非常适用于解决这个问题。

来源

2012-04-04 18:02:08 RickAndMSFT

，如果你复制粘贴你的源代码在这里，我认为你缺少一个“>”

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

来源

2012-04-04 14:13:43 mslliviu

对不起。我的代码中有一个“>”，我在发布问题时意外删除了该代码。 – 2012-04-04 14:24:11

是否如果关闭label标签工作？

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

来源

2012-04-04 14:17:26

我在写一个问题时意外地删除了“>”符号。这个符号出现在我的代码中。 – 2012-04-04 14:26:50

这本来太简单了。;）就像一个测试一样，如果你注释掉除了包含fromDate的div以外的页面上的所有其他html，你是否仍然看到这个问题？（我想知道datepicker HTML上面的其他某种风格是否会给你带来问题......） – 2012-04-04 14:50:29

我假设你已经下载了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 文件旁边，就像它位于custom-theme目录中一样。

jQuery Getting Started Guide

来源

2012-04-06 00:49:33

Datepicker显示不正确

回答

相关问题