使用jquery的mvc3日期选择器示例

Question

我是mvc3的新手，查看引擎是剃须刀，在我看来，如何获取日期选择器。我应该在哪里写日期选择器函数来实现它的所有视图。怎么能在我的每一个观点中称呼它。

Answer 1

你可以添加一些常用的类需要显示为日期选择器的所有输入字段：

@Html.TextBoxFor(x => x.SomeDate, new { @class = "date" }) 

，然后在一个单独的JavaScript文件：

$(function() { 
    $('.date').datepicker(); 
}); 

那么所有你需要做的将这个.js文件包含在你的Layout中，这样它就可以为每个页面和每个拥有日期类的输入字段执行。

Answer 2

1. 在_Layout.cshtml添加下列行

// CSS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" rel="Stylesheet" type="text/css" /> 

// SCRIPTS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 

1. 导航到共享文件夹，并在该处创建名称为Edit的文件夹orTemplates

2. EditorTemplates文件夹中创建名为日期时间

3. 下面的代码添加到日期时间局部视图

   @model System.DateTime的一个局部视图？ @ Html.TextBox（ “”，（Model.HasValue Model.Value.ToShortDateString（）：的String.Empty），新{@class = “pickDate”}）

   <script type="text/javascript"> 
        $(document).ready(function() { 
   
         $('.pickDate').datepicker({ 
          changeMonth: true, 
          changeYear: true 
         }); 
        }); 
       </script> 
   

现在你有一切设置，并在每一个你有一个字段是DateTime类型的视图，你会看到一个jQueryUI日期选择器，当点击该领域内，或者如果你修改它的属性，当点击图标等。

例如，您的看法就像它是从模型创建的一样，你不需要添加任何东西。

<div class="editor-label"> 
    @Html.LabelFor(model => model.DateOfBirth) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.DateOfBirth) 
    @Html.ValidationMessageFor(model => model.DateOfBirth) 
</div> 

UPDATE

你可能有某种脚本科里森的。尝试添加

@if(false) 
{ 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
} 

在您的视图顶部。