MVC4 表单编辑及显示日期格式

两个方案，分别分四个模块来解释

1. Controller增加页面控制方法
2. Model增加字段
3. View实际页面
4. 实际效果

方案一：

1，各个模块这个是一样的         public ActionResult Edit(int id = 0)

        {

            StaffInfo staffInfo = db.StaffInfo.Find(id);

            if (staffInfo == null)

            {

                return HttpNotFound();

            }

            return View(staffInfo);

        }

2，Model中字段属性增加DateType（这里格式不能改）         [DisplayName("生日")]

        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

        [DataType(DataType.Date)]

        public Nullable<DateTime> BirthDate { get; set; }

3，View中使用Editor         <div class="editor-label">

            @Html.LabelFor(model => model.BirthDate)

        </div>

        <div class="editor-field">

          ：  @Html.EditorFor(model => model.BirthDate)

             @Html.ValidationMessageFor(model => model.BirthDate)

        </div>

4， 显示及编辑效果

方案二：

2，模型不做设置

        [DisplayName("生日")]

       public Nullable<DateTime>BirthDate { get;set; } 3.1，View中使用TextBoxFor        <divclass="editor-label">

           @Html.LabelFor(model=> model.BirthDate)        </div>        <divclass="editor-field">           ： @Html.TextBoxFor(model=> model.BirthDate,"{0:yyyy年MM月dd日}",new { @class = "datetype",type = "text" })             @Html.ValidationMessageFor(model=> model.BirthDate)

       </div> 3.2，新建脚本文件

$(function() {

   $.validator.addMethod('date',

   function (value,element){

       if (this.optional(element)){

           return true;

       }

       var valid = true;

       try {

           $.datepicker.parseDate('yy年mm月dd日',value);

       }

       catch (err){

           valid = false;

       }

       return valid;

   });

   $(".datetype").datepicker({dateFormat:'yy年mm月dd日' });

});

3.3 增加Jquery库函数调用

@section Scripts {

   @Styles.Render("~/Content/themes/base/css")

   @Scripts.Render("~/bundles/jquery")

   @Scripts.Render("~/bundles/jqueryui")

   @Scripts.Render("~/bundles/jqueryval")

}

3.4增加脚本引用（在库函数之后）

<script src="~/Scripts/datepicker.js"></script>

4，实际效果