Databases
StackOverflow2013
Postsdbo
POMVC jQuery DatePicker Style
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC jQuery DatePicker Style
    text
    copied!<p>I'm currently implementing a MVC application against a database in which the create form allows me to instert a new register into the db.</p> <p>I tried to use jQuery DatePicker for showing DateTime fields and get the info.</p> <p>My problem is that after implement it, css style works perfectly on IE9 but not in Chrome.</p> <p>In Chrome.... if a do a click on the field and hold the button pressed, datepicker appears with the css theme applied. Once i release the mouse button, css style dissapears. Then, i select a date (on non-styled calendar) and the calendar come back to css applied and is not remembering my choice. Then i need to re-select the date on css-styled calendar.</p> <p><strong>\Views\Shared_Layout.cshtml</strong> ....</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;@ViewBag.Title&lt;/title&gt; &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt; &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt; &lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /&gt; &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /&gt; &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /&gt; &lt;script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; @RenderBody() </code></pre> <p> </p> <p><strong>\Views\Shared\EditorTemplates\DateTime.cshtml</strong> ...</p> <pre><code>@model Nullable&lt;DateTime&gt; @{ DateTime dt = DateTime.Now; if (Model != null) { dt = (System.DateTime) Model; } @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date" }) } </code></pre> <p><strong>\Views\Agent\Create.cshtml</strong> ...</p> <pre><code>@model Agente.Receipts @{ ViewBag.Title = "Create"; } &lt;h2&gt;Create&lt;/h2&gt; &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt; @using (Html.BeginForm()) { @Html.ValidationSummary(true) &lt;fieldset&gt; &lt;legend&gt;Receipts&lt;/legend&gt; &lt;!-- &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.ReceiptId) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.ReceiptId) @Html.ValidationMessageFor(model =&gt; model.ReceiptId) &lt;/div&gt; --&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.QuantityReceived) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.QuantityReceived) @Html.ValidationMessageFor(model =&gt; model.QuantityReceived) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.ReceivedWareHouseDate) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.ReceivedWareHouseDate) @Html.ValidationMessageFor(model =&gt; model.ReceivedWareHouseDate) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.PONumber) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.PONumber) @Html.ValidationMessageFor(model =&gt; model.PONumber) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.Weight) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.Weight) @Html.ValidationMessageFor(model =&gt; model.Weight) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.CommentsReceived) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.CommentsReceived) @Html.ValidationMessageFor(model =&gt; model.CommentsReceived) &lt;/div&gt; &lt;p&gt; &lt;input type="submit" value="Create" /&gt; &lt;/p&gt; &lt;/fieldset&gt; } &lt;div&gt; @Html.ActionLink("Back to List", "Index") &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload