Question

我是mvc3的新手，查看引擎是剃刀，如何在我的视图中获取日期选择器。我应该在哪里写日期选择器功能，以实现所有视图。如何在我的每个视图中调用它。

Answer 1

您可以为需要显示为datepicker的所有输入字段添加一些公共类：

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

然后在单独的javascript文件中：

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

然后你所要做的就是在你的Layout中包含这个.js文件，以便它为每个页面和每个拥有日期类的输入字段执行。

Answer 2

在_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>

导航到共享文件夹，然后创建一个名为EditorTemplates的文件夹
在EditorTemplates文件夹中创建一个名为DateTime的部分视图

将以下代码添加到DateTime局部视图

@model System.DateTime？ @ Html.TextBox（“”，（Model.HasValue？Model.Value.ToShortDateString（）：string.Empty），new {@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>

<强>更新

你可能有某种脚本碰撞。尝试添加

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

在你的观点之上。

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

2 个答案: