私は現在、データベースに対して MVC アプリケーションを実装しています。このデータベースでは、作成フォームを使用して新しいレジスタをデータベースに挿入できます。
DateTimeフィールドを表示して情報を取得するためにjQuery DatePickerを使用しようとしました。
私の問題は、それを実装した後、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>