-1

我目前正在针对数据库实现 MVC 应用程序,其中创建表单允许我将新寄存器插入到数据库中。

我尝试使用 jQuery DatePicker 来显示 DateTime 字段并获取信息。

我的问题是,在实现它之后,css 样式在 IE9 上完美运行,但在 Chrome 中却不行。

在 Chrome 中......如果单击该字段并按住按钮,日期选择器将出现并应用 css 主题。一旦我释放鼠标按钮,css 样式就会消失。然后,我选择一个日期(在非样式日历上)并且日历返回到 css 应用并且不记得我的选择。然后我需要在 css 样式的日历上重新选择日期。

\Views\Shared_Layout.cshtml ....

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">        </script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
     <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet"  type="text/css" /> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script> 
   <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 
   <script src="@Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
</head>

<body>
   @RenderBody()

\Views\Shared\EditorTemplates\DateTime.cshtml ...

@model Nullable<DateTime> 

 @{ 
     DateTime dt = DateTime.Now; 
    if (Model != null) 
    { 
      dt  = (System.DateTime) Model; 

    } 
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), 
     new { @class = "datefield", type = "date"  }) 
} 

\Views\Agent\Create.cshtml ...

@model Agente.Receipts

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

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





@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Receipts</legend>


  <!--  <div class="editor-label">
        @Html.LabelFor(model => model.ReceiptId)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ReceiptId)
        @Html.ValidationMessageFor(model => model.ReceiptId)
    </div> -->

    <div class="editor-label">
        @Html.LabelFor(model => model.QuantityReceived)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.QuantityReceived)
        @Html.ValidationMessageFor(model => model.QuantityReceived)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ReceivedWareHouseDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ReceivedWareHouseDate)
        @Html.ValidationMessageFor(model => model.ReceivedWareHouseDate)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PONumber)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PONumber)
        @Html.ValidationMessageFor(model => model.PONumber)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Weight)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Weight)
        @Html.ValidationMessageFor(model => model.Weight)
    </div>


    <div class="editor-label">
        @Html.LabelFor(model => model.CommentsReceived)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CommentsReceived)
        @Html.ValidationMessageFor(model => model.CommentsReceived)
    </div>

      <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
4

1 回答 1

1

我在使用 jquery-ui datepicker 时遇到了非常相似的问题,经过一些实验后,它对我来说完全适用于所有浏览器。

我想这会对你有所帮助。首先,您不需要添加jquery-ui包中的每个 .js 文件。您只需要从您的 ui 包 (themes/base/jquery-ui.css) 的这个位置添加 jqery-ui.css,并从这个位置 (ui/jquery-ui.js) 添加一个 .js 文件。它适用于每个 jquery ui 函数。是否包含 demoes.css 对 datepicker 影响不大

这些是文件的未压缩版本,如果需要,您也可以参考缩小版本。我希望这个对你有用。如果不是,则检查天气,其他一些 -webkit- 类型的样式是否冲突

请提及这是否对您有用。

于 2012-07-24T10:37:07.853 回答