简体   繁体   中英

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="../../Scripts/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, ie Html.HiddenFor . Then the onSelect option is used to observe changes made to the calendar, and update the hidden field accordingly.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM