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

如何让jQuery datetimepicker在下面的局部视图中内联显示？我现在得到的是一个带有datetimepicker的文本框，当它被点击时。我想datetimepicker内联，而不是文本框。在ASP.NET MVC2局部视图中内联jQuery 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; } 
    }

来源

2011-03-20 Klaus Nji

不与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选项用于观察对日历所做的更改，并相应地更新隐藏字段。

来源

2011-03-20 21:59:45

谢谢。我不知道上面的代码片段是什么，但我看到一个内联日期选择器。现在只需要解决一些布局问题。再次感谢。 – 2011-03-21 02:16:22

还有一个问题，如果可能的话，这个应该做什么： – 2011-03-22 22:12:58

我已经添加了关于代码的更多解释。我希望它有帮助。 – 2011-03-22 23:48:59

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

回答

相关问题