开发者

Inlining jQuery datetimepicker in ASP.NET MVC2 partial view

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜