0

我正在使用在这里找到的 DateTimePicker:http: //trentrichardson.com/examples/timepicker/(请注意,如果我在 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

我将这是第二个答案,因为我的第一个答案对您的代码有好处。

如果您在 PartialView 中注意到,您将使用 Url.Content 路径作为脚本和 css。但是,您没有像使用脚本那样使用来自根目录的路径作为 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

这可能会或可能不会回答您的问题,但是,在查看您的代码之后,您的 HTML 相当混乱,因为您在 HTML 正文中包含 JavaScript 和 CSS。这并不能保证浏览器会正确执行它。

相反,我建议将 JavaScript 和 CSS 包含在适当的标题中的 _Layout 页面中,或者至少在标题中创建一个部分,以便在您在局部视图中引用它时确保正确放置。这是一个例子......

在您的 _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 呈现时,您会发现那些 script 和 link 标签现在已被放置在适当的 HTML 的 Header 部分中。

于 2012-04-19T14:29:51.453 回答
0

确保下载日期选择器所需的文件并将它们包含到您的页面中。

http://jqueryui.com/download

ui 核心和 datepicker 小部件

于 2012-04-19T14:03:25.733 回答