2012-04-04 17 views
0

MVC.NET Webサイトを作成しようとしていて、jQueryのdatepickerコンポーネントを使用したいとします。奇妙に表示されている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:私は次のコードを使用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> 

:私のレイアウトのページに、私は次のコードを使用していjQueryのを使用するには方法:

The way datepicker displayed

私はGoogleで検索して固定しようとしましたが、私の問題を解決する方法を見つけることがありました。私は間違って何をしていますか?あなたのソースコードはここに貼り付けるコピーする場合、

+0

私はjQueryのマスターはないですが、人々は、 'エディタ・フィールドsearch'と' fromDate'はどのようなものかを知っておく必要があるかもしれません。 – Bastardo

+0

editor-field-searchは標準MVC.NETプロジェクトのCSSクラスです。 fromDateは、この入力から値を取得するモデルクラスのフィールドです。 –

+0

Oki doki、asp.net-mvcタグが表示されませんでした。 – Bastardo

答えて

3

純粋なCSS参照の問題です。 CSSが正しく参照されていません。サンプルUsing the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVCを実行し、F12ツールを使用し、コードを比較して、CSSが使用されていない理由を理解してください。 - Rick.Anderson-at-Microsoft.com は、私のCSSリファレンスをコメントアウトし、あなたは同じ不正な形式のカレンダーを取得します。 F12のツールは、これを理解するのに最適です。

0

私はあなたがlabelタグを閉じると「>」

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

申し訳ありません。私のコードに ">"がありましたが、私は質問を投稿している間に誤って削除しました。 –

0

それが動作します不足していると思いますか?

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

私は質問を書いているときに偶然「>」記号を削除しました。このシンボルは私のコードにあります。 –

+0

それは簡単すぎるでしょう。;)テストと同様に、fromDateを含むdivを除いて、ページ上の他のすべてのhtmlをコメントアウトすると、問題が表示されますか? (私はdatepicker HTMLの上にいくつかの他のスタイルがあなたのために問題を引き起こしているのだろうかと思っています...) –

0

私はカップルの事を試みることができる...あなたはjQueryのThemeRollerからテーマをダウンロードしたと仮定しています:

  1. それは互換性があることを確認してくださいjQueryとjQueryのUI Javascriptのバージョンは に、ダウンロードに含まれて使用してください(ダウンロードのjsディレクトリにあります)。 jQuery 1.7.1のような の外観は、jQuery UI に含まれる最新のバージョンであり、あなたのページにjQuery 1.7.2があります。
  2. jQuery UIのcssファイルをcss \ custom-themeディレクトリに入れてみてください。これには、すべてのjQueryコンポーネントに必要なすべてのCSSが含まれています。また、 イメージがカスタムテーマディレクトリにあるように、アプリケーション内のjQuery css ファイルの隣にイメージがコピーされていることを確認してください。

jQuery Getting Started Guide

関連する問題