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顯示不正確

回答

相關問題