jQuery的的DateTimePicker不显示的CSS

jQuery的的DateTimePicker不显示的CSS

本文介绍了jQuery的的DateTimePicker不显示的CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的DateTimePicker在这里找到: http://trentrichardson.com/examples/timepicker/(请注意,我得到如下所述,如果我使用默认的DatePicker内的Jquery以及​​同样的问题)。

我已签,我有合适的CSS,图像,jQuery的安装版本/重新安装了很多次,我似乎无法找出是什么原因造成我的DateTimePicker看起来是这样的:

如果我删除了所有的CSS(包括我的站点的默认MVC CSS)我失去了蓝色背景一周的天数(不是这些应该由jQuery UI的主题是彩色的?)。

我在哪里需要寻找解决我的问题?

编辑以显示我的code:

这是我在我的页面内呈现PartialView:

 <链接HREF =@ Url.Content(主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css)的rel =stylesheet属性
    类型=文/ CSS/>
<脚本的src =@ Url.Content(〜/脚本/ jQuery的-1.7.2.min.js)TYPE =文/ JavaScript的>< / SCRIPT>
<脚本的src =@ Url.Content(〜/脚本/ jquery.validate.min.js)TYPE =文/ JavaScript的>< / SCRIPT>
<脚本的src =@ Url.Content(〜/脚本/ jquery.validate.unobtrusive.min.js)TYPE =文/ JavaScript的>< / SCRIPT>
<脚本的src =@ Url.Content(〜/脚本/ jQuery的-UI-1.8.19.custom.min.js)TYPE =文/ JavaScript的>< / SCRIPT>
<脚本的src =@ Url.Content(〜/脚本/ jQuery的-UI-timepicker-addon.js)TYPE =文/ JavaScript的>< / SCRIPT>
<脚本的src =@ Url.Content(〜/脚本/ FillCourseForm.js)TYPE =文/ JavaScript的>< / SCRIPT>
< D​​IV ID =CourseFormFields>
< P>该字符串是@ ViewBag.selectedString< / P>
@using(Html.BeginForm(ApplyToTeach,课程,FormMethod.Post))
{
    @ Html.ValidationSummary(真)
    <&字段集GT;
    < D​​IV CLASS =编辑标记>
        @ Html.LabelFor(型号=> model.StartDate)
    < / DIV>
    < D​​IV CLASS =主编场>
        @ Html.EditorFor(型号=> model.StartDate)
        @ Html.ValidationMessageFor(型号=> model.StartDate)
    < / DIV>
    &所述p为H.;
        <输入类型=提交值=创建/>
    &所述; / P>
< /字段集>

和Jquery的:

  $(#起始日期)。的DateTimePicker({
    AMPM:真
});

生成的HTML(截断了一下,$ C $的C prevent大规模的墙):

 <!DOCTYPE HTML>
< HTML和GT;
< HEAD>
    <标题> ApplyToTeach< /标题>
    <链接HREF =/内容/的site.css的rel =stylesheet属性类型=文/ CSS/>
    <链接HREF =主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css的rel =stylesheet属性
    类型=文/ CSS/>
    <脚本的src =/脚本/ jQuery的-1.7.2.min.js类型=文/ JavaScript的>< / SCRIPT>
    <脚本的src =/脚本/ jQuery的-UI-1.8.19.min.js类型=文/ JavaScript的>< / SCRIPT>
    <脚本的src =/脚本/ jquery.unobtrusive-ajax.min.js类型=文/ JavaScript的>< / SCRIPT>
< /头>
<身体GT;
    < D​​IV CLASS =页>
       < D​​IV ID =头>
            < D​​IV ID =标题>
                < H1>圣。散碎&LT保罗学院; / H1>
            < / DIV>            < D​​IV ID =logindisplay>
                    [< A HREF =/帐号/登录>登录针对< / A> ]            < / DIV>
            < D​​IV ID =MenuContainer中>
                < UL ID =菜单>
                    <立GT;< A HREF =/>家庭和LT; / A>< /李>
                    <立GT;< A HREF =/学生>学生和LT; / A>< /李>
                    <立GT;< A HREF =/场>课程与LT; / A>< /李>
                    <立GT;< A HREF =/导师>教师和LT; / A>< /李>
                < / UL>
            < / DIV>
        < / DIV>
        < D​​IV ID =主>
            <脚本的src =/脚本/ jQuery的-UI-timepicker-addon.js类型=文/ JavaScript的>< / SCRIPT>
< D​​IV ID =originalForm>
<链接HREF =主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css的rel =stylesheet属性
    类型=文/ CSS/>
<脚本的src =/脚本/ jQuery的-1.7.2.min.js类型=文/ JavaScript的>< / SCRIPT>
<脚本的src =/脚本/ jquery.validate.min.js类型=文/ JavaScript的>< / SCRIPT>
<脚本的src =/脚本/ jquery.validate.unobtrusive.min.js类型=文/ JavaScript的>< / SCRIPT>
<脚本的src =/脚本/ jQuery的-UI-1.8.19.custom.min.js类型=文/ JavaScript的>< / SCRIPT>
<脚本的src =/脚本/ jQuery的-UI-timepicker-addon.js类型=文/ JavaScript的>< / SCRIPT>
<脚本的src =/脚本/ FillCourseForm.js类型=文/ JavaScript的>< / SCRIPT>
< D​​IV ID =CourseFormFields>
&所述,P>本串为< / P>
<形式的行动=/场/ ApplyToTeach的方法=后> <&字段集GT;
        <传奇> CourseTemplates< /传说>
        < D​​IV CLASS =编辑标记>
            <标签=起始日期>起始日期< /标签>
        < / DIV>
        < D​​IV CLASS =主编场>
            <输入类=文本框单行数据-VAL =真正的数据-VAL-所需=是必需的起始日期字段 ID =起始日期NAME =起始日期类型=文本VALUE =1/1/0001 12:00:00 AM/>
            <跨度类=现场验证,有效的数据valmsg换=起始日期数据valmsg替换=真正的>< / SPAN>
        < / DIV>        &所述p为H.;
            <输入类型=提交值=创建/>
        &所述; / P>
    < /字段集>
< /形式为GT;< / DIV>
< / DIV>
< D​​IV ID =divToAppend>
< / DIV>
        < / DIV>
        < D​​IV ID =页脚>
        < / DIV>
    < / DIV>
< /身体GT;
< / HTML>


解决方案

我在做这个第二个答案,因为我第一次有好点为您code。

如果您在PartialView注意到,您用于脚本和CSS Url.Content路径。然而,当你和你的脚本不使用从根本上为您的jQuery-ui.custom.css路径的路径。注...

 <链接HREF =@ Url.Content(主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css)的rel =stylesheet属性
    类型=文/ CSS/>
<脚本的src =@ Url.Content(〜/脚本/ jQuery的-1.7.2.min.js)TYPE =文/ JavaScript的>< / SCRIPT>

我相信这应该不是是...(用的CSS适当的路径替换 - 我总是把我的CSS中的/文件夹的内容在我的项目)。

 <链接HREF =@ Url.Content(〜/内容/主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css)相对= 样式
    类型=文/ CSS/>
<脚本的src =@ Url.Content(〜/脚本/ jQuery的-1.7.2.min.js)TYPE =文/ JavaScript的>< / SCRIPT>

I am using the DateTimePicker found here: http://trentrichardson.com/examples/timepicker/ (note that I get the same problem described below if I use the default DatePicker within Jquery as well).

I have checked that I have the appropriate CSS, images, version of jquery installed/reinstalled many times and I cannot seem to find what is causing my DateTimePicker to look like this:

If I remove all CSS (including my site's default MVC CSS) I lose the blue background to the days of the week (aren't these supposed to be colored by the Jquery UI theme?).

Where do I need to look to solve my problem?

Edit to show my code:

This is the PartialView I am rendering within my page:

<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>

And the Jquery:

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

The generated HTML (truncated a bit to prevent massive wall of code):

<!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>
解决方案

I'm making this a second answer since my first has good point for your code.

If you notice in your PartialView, you use Url.Content paths for your scripts and css. However, you aren't using a path from the root for your jquery-ui.custom.css path as you are with your scripts. Note...

<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>

I believe it should instead be...(replace with the appropriate path to the CSS - I always put my CSS in the /Content folder in my project).

<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>

这篇关于jQuery的的DateTimePicker不显示的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-03 19:05