0

MVC.NET Webサイトを作成しようとしていdatepickerますが、jQueryのコンポーネントを使用したいと思います。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が正しく参照されていません。HTML5およびjQueryUIDatepicker PopupCalendarとASP.NETMVCを使用してサンプルを実行し、ツールを使用F12してコードと比較し、CSSが使用されていない理由を特定します。– Rick.Anderson-at-Microsoft.comが私のCSS参照をコメントアウトすると、同じ不正な形式のカレンダーが表示されます。ツールはこれを理解するのF12に最適です。

于 2012-04-04T18:02:08.933 に答える
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 に答える
0

jQueryのThemeRollerからテーマをダウンロードしたと仮定します...いくつか試してみることができます：

  1. ダウンロードに含まれているjQueryおよびjQueryUIJavascriptバージョンを使用して、互換性があることを確認します（ダウンロードのjsディレクトリ内）。jQuery1.7.1はjQueryUIダウンロードに含まれている最新バージョンであり、ページにjQuery1.7.2があるようです。
  2. css\custom-themeディレクトリにあるjQueryUIcssファイルを試してください。これにはすべてのjQueryコンポーネントに必要なすべてのcssが含まれています。また、カスタムテーマディレクトリにあるように、アプリケーションのjQuerycssファイルの横に画像がコピーされていることを確認してください。

jQueryスタートガイド

于 2012-04-06T00:49:33.900 に答える