0

http://trentrichardson.com/examples/timepicker/にあるDateTimePickerを使用しています(Jquery内でもデフォルトのDatePickerを使用すると、以下で説明するのと同じ問題が発生することに注意してください)。

適切なCSS、イメージ、jqueryのバージョンが何度もインストール/再インストールされていることを確認しましたが、DateTimePickerが次のようになっている原因が見つからないようです。

http://imgur.com/D1t78

すべてのCSS(サイトのデフォルトのMVC CSSを含む)を削除すると、曜日の青い背景が失われます(これらは、Jquery UIテーマによって色付けされているはずではありませんか?)。

問題を解決するためにどこを探す必要がありますか?

私のコードを表示するために編集します:

これは、ページ内でレンダリングしているPartialViewです。

<link href="@Url.Content("themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<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-ui-1.8.19.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/FillCourseForm.js")" type="text/javascript"></script>
<div id="CourseFormFields">
<p>the string is @ViewBag.selectedString</p>
@using (Html.BeginForm("ApplyToTeach", "Course", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <fieldset>
    <div class="editor-label">
        @Html.LabelFor(model => model.StartDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

そしてJquery:

$("#StartDate").datetimepicker({
    ampm: true
});

生成されたHTML(コードの巨大な壁を防ぐために少し切り捨てられました):

<!DOCTYPE html>
<html>
<head>
    <title>ApplyToTeach</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet"
    type="text/css" />
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.19.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"  type="text/javascript"></script>
</head>
<body>
    <div class="page">
       <div id="header">
            <div id="title">
                <h1>St. Paul School of Catechesis</h1>
            </div>

            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]

            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Student">Students</a></li>
                    <li><a href="/Course">Courses</a></li>
                    <li><a href="/Instructor">Instructors</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<div id="originalForm">
<link href="themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet"
    type="text/css" />
<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="/Scripts/FillCourseForm.js" type="text/javascript"></script>
<div id="CourseFormFields">
<p>the string is </p>
<form action="/Course/ApplyToTeach" method="post">    <fieldset>
        <legend>CourseTemplates</legend>
        <div class="editor-label">
            <label for="StartDate">StartDate</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The StartDate field is required." id="StartDate" name="StartDate" type="text" value="1/1/0001 12:00:00 AM" />
            <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
</form></div>
</div>
<div id ="divToAppend">
</div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>
4

3 に答える 3

1

私の最初の答えはあなたのコードに良い点があるので、これを2番目の答えにします。

PartialViewで気付いた場合は、スクリプトとcssにUrl.Contentパスを使用します。ただし、スクリプトの場合のように、jquery-ui.custom.cssパスにルートからのパスを使用していません。ノート...

<link href="@Url.Content("themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>

代わりに...(CSSへの適切なパスに置き換えてください-私は常にCSSをプロジェクトの/ Contentフォルダーに置きます)。

<link href="@Url.Content("~/Content/themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
于 2012-04-19T14:41:40.973 に答える
0

日付ピッカーに必要なファイルをダウンロードして、ページに含めてください。

http://jqueryui.com/download

UIコアとdatepickerウィジェット

于 2012-04-19T14:03:25.733 に答える
0

これはあなたの質問に答えるかどうかはわかりませんが、コードを見てみると、HTMLの本文にJavaScriptとCSSを含めているという意味で、HTMLはかなり乱雑です。これは、ブラウザが正しく実行することを保証するものではありません。

代わりに、必要に応じてヘッダーの_LayoutページにJavaScriptとCSSを含めるか、少なくとも、部分ビューで参照するときに適切な配置を確保できるようにヘッダー内にセクションを作成することをお勧めします。ここに例があります...

_Layout:

<head>
  <!-- Put your links and scripts first. -->
  <link ...>
  <script ...>
  <!-- Then make sure you include this. -->
  @RenderSection("Header", false)
</head>

次に、部分ビューで、これを行うことができます。

@* At the top of your partial view *@
@section Header {
<link href="@Url.Content("themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<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-ui-1.8.19.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/FillCourseForm.js")" type="text/javascript"></script>
}

HTMLがレンダリングされると、これらのスクリプトタグとリンクタグが適切なHTMLであるヘッダーセクションに配置されていることがわかります。

于 2012-04-19T14:29:51.453 に答える