Upgrade to MVC 3, now the date picker is not working
In my previous version, I used a Date Picker which could default as null as follows;
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%:Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }) %>
Now I am using
@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }))
And this do开发者_运维百科esn't work. When I click on a Date Field, I do not get a popup anymore.
So a date field looks like;
@Html.EditorFor(model => model.contract.GivenDate)
This is a DateTime field. In my _Layout I have;
$(function () { $(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' }); });Also I reference;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js")" type="text/javascript"></script>
So what am I doing wrong?
The following works for me:
Inside Views\Home\Index.cshtml:
@model MvcApplication10.Models.FooBar
<!DOCTYPE html>
<html>
<head>
<title>Test DateTime?</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js")" type="text/javascript"></script>
<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function ()
{
$(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' });
});
</script>
</head>
<body>
@Html.EditorFor(model => model.GivenDate)
</body>
</html>
Inside Views\Shared\EditorTemplates\DateTime.cshtml:
@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })
@* you'll notice I also removed an extra ) at the end of the last line *@
And finally Models\FooBar.cs:
public class FooBar
{
public DateTime? GivenDate { get; set; }
}
Can you try this out to see if there's any differences?
I've had problems with the jQuery date picker when my input elements don't have an ID (which I see will happen to you here because you aren't specifying a name when calling Html.TextBox), maybe try assigning one? E.g.
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker", id = "someUniqueDatePickerId" }))
i'm using id instead of classes i also included date diff function you can remove it if you want
<script type="text/javascript">
$(document).ready(function () {
$("#StartDate").datepicker();
$('#EndDate').datepicker({
onSelect: function () {
var diff = dateDiff($('#StartDate').datepicker("getDate"), $('#EndDate').datepicker("getDate"));
$('#DateDiff').html("Gece Sayısı:" + diff);
}
});
function dateDiff(startDate, endDate) {
if (endDate && startDate) return (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
return "You must complete both dates!";
}
});
<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>
<div class="editor-label">
@Html.LabelFor(model => model.EndDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EndDate)
<div id="DateDiff"></div>
@Html.ValidationMessageFor(model => model.EndDate)
</div>
I found the answer, although no clues in the question. The problem was that I was using a javascript library;
jquery-ui-1.8.4.custom.min.js
When I disabled it, it worked. I suspect there are some library name clashes that caused the problem. It worked with jquery-ui-1.8.4.min.js, but now I am using jquery-ui-1.8.10.min.js
加载中,请稍侯......
精彩评论