我目前正在针对数据库实现 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>