首页 > 代码库 > MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker
MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker
实现的效果为：在编辑视图中，对DateTime类型的属性，显示jQuery UI的datepicker。效果如下：
Student.cs
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime? JoinTime { get; set; }
}
HomeController:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new Student(){Id = 1, JoinTime = DateTime.Now, Name = "Darren"});
}
}
Views/Shared/EditorTemplates文件夹中创建DateTime.cshtml,视图名称必须和属性类型保持一致。另外，这里时间格式的设置必须和datepicker保持一致。
@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("yyyy-MM-dd") : "", new {@class = "date"})
Home/Index.cshtml视图中：
@model MvcApplication1.Models.Student
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}
<link href=http://www.mamicode.com/"~/Content/Site.css" rel="stylesheet" />
<link href=http://www.mamicode.com/"~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
@using (Html.BeginForm()){@Html.EditorForModel()
}
@section scripts
{ <script src=http://www.mamicode.com/"~/Scripts/jquery-1.8.2.min.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery-ui-1.8.24.min.js"></script> <script type="text/javascript"> $(function() { $(‘.date‘).datepicker({ dateFormat: ‘yy-mm-dd‘});
});
</script>
}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。