Question

如何让jQuery datetimepicker在下面的局部视图中显示为内联？我现在得到的是一个文本框，它在点击时调出datetimepicker。我想要datetimepicker内联而不是文本框。

<%@ 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" />

    <% } %>

模型如下：

public class DateActionModel
    {
        public DateActionModel() { Date = DateTime.UtcNow; }
        public DateTime Date { get; set; }
    }

Answer 1

inline demo for Datepicker不能执行您想要的操作以及onSelect事件吗？

<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" />

<% } %>

编辑：

关于代码的更多解释。

要显示内联，您需要<div>元素而不是文本框，因此需要<div id="datepicker">。通过这样做，Date不再是表单字段，因此为此添加了隐藏字段，即Html.HiddenFor。然后onSelect选项用于观察对日历所做的更改，并相应地更新隐藏字段。

在ASP.NET MVC2局部视图中内联jQuery datetimepicker

1 个答案: