Asp.net mvc mvc3中带有razor视图引擎的日期选择器

我正在使用mvc3，razor是我的视图引擎，我如何在我的

---

查看。

我认为您必须使用脚本，请查看。这是一个很好的易于使用的库，支持主题设置

我在这里回答，请查看：

---

基本上，您在一个位置使用带有脚本的模板，并使用EditorFor调用它

您可以在项目的脚本目录中创建脚本

基本示例：

$(document).ready(function () { $("#datepicker").datepicker({ });});

在你看来：

@model YourProjectName.Models.User

@Html.TextBoxFor（model=>model.Dateadd，new{@Value=DateTime.Now，id=“datepicker”}）
@Html.ValidationMessageFor（model=>model.Dateadd）

@模型可为空
@if（Model.HasValue）{
@Html.TextBox（“”，String.Format（“{0:yyyy-MM-dd HH:MM}”，Model.Value），新{
@class=“textbox”，@style=“width:400px；”}）
}
否则{
@Html.TextBox（“，String.Format（{0:yyyy-MM-dd HH:MM}），DateTime.Now），新{
@class=“textbox”，@style=“width:400px；”}）
}
@{
字符串名称=ViewData.TemplateInfo.HtmlFieldPrefix；
字符串id=name.Replace（“.”，“”）；
}
$（文档）.ready（函数（）{
$（“#@id”）.datepicker
({
日期格式：“日/月/年”，
showStatus:true，
《秀周》：没错，
《光明周刊》：没错，
月数：1，
showAnim：“规模”，
展示选项：{
原点：[“顶部”、“左侧”]
}
});
});

如果您对日期时间类型使用编辑器模板，则可以使用HTML5日期选择器（即

）。实际上，您可以将一个名为DateTime.cshtml的视图放在名为Views/Shared/EditorTemplates的文件夹中，然后可以根据需要设置编辑器的样式。答案中有一个例子。

给顾问们：在局部视图（模板）中使用脚本是一种不好的做法

就我而言，它根本不起作用。因为访问jquery发生在它作为js文件包含之前。 此外，您无法预测将此日期选择器控件放置在何处。 此外，对于页面上的每个编辑器，您都会有这个“就绪”块

RenderSection将为所有这些带来一些秩序，但它不适用于PartialView和模板

---

因此，只需将javascript代码从模板（partialview）移动到视图。

谢谢plurby，它工作得很好，我只需将css和jQuery链接更新到最新版本，可能是MVC4之类的东西？？我的表单中有多个日期，所以我没有使用“#datepicker”.datepicker”。然后在HTML中，将“id=”datepicker“更改为“@class=”datepicker”。我将此代码放在表单中，只得到一个文本框。

<div class="editor-field">
  @Html.TextBoxFor(model => model.Dateadd, new { @Value = DateTime.Now, id = "datepicker" })
  @Html.ValidationMessageFor(model => model.Dateadd)
</div>

@model Nullable<System.DateTime>
@if ( Model.HasValue ) {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , Model.Value ) , new  { 
@class = "textbox" , @style = "width:400px;" } )
}
else {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , DateTime.Now ) , new {   
@class = "textbox" , @style = "width:400px;" } )
}

@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
$("#@id").datepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
showOptions: {
origin: ["top", "left"]
}
});
});
</script>