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 WebApplication1.Models.Student
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm())
{
    @Html.EditorForModel()
}

@section scripts{
  
    <script type="text/javascript">
        $(function () {
            $('.date').datepicker({
                dateFormat: 'yy-mm-dd'
            })
        });
    </script>
}

在_Layout.cshtml head中增加

 <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />

在_Layout.cshtml body在jquery和bootstrap后面增加

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>