How do I make the jQuery datetimepicker appear inline in the following partial view ? What I get now is a textbox that brings up the datetimepicker when it is clicked. I want datetimepicker inline instead of textbox.
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AkwiMemorial.Models.DateActionModel>" %>
<link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../S开发者_运维技巧cripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Date').datepicker({ inline: true });
});
</script>
<% using (Html.BeginForm()) { %>
<div>
<%= Html.EditorFor(x => x.Date)%>
</div>
<input type="submit" value="OK" />
<% } %>
the model is as follows:
public class DateActionModel
{
public DateActionModel() { Date = DateTime.UtcNow; }
public DateTime Date { get; set; }
}
Doesn't the inline demo for Datepicker do what you want, along with the onSelect
event?
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
$('#Date').val(dateText);
}
});
});
</script>
<% using (Html.BeginForm()) { %>
<div>
<div id="datepicker"><%= model.Date %></div>
<%= Html.HiddenFor(x => x.Date)%>
</div>
<input type="submit" value="OK" />
<% } %>
EDIT:
More explanation about the code.
To display inline, you need a <div>
element instead of a text box, hence <div id="datepicker">
. By doing this, Date
is no longer a form field, so a hidden field was added for this, i.e. Html.HiddenFor
. Then the onSelect
option is used to observe changes made to the calendar, and update the hidden field accordingly.
精彩评论