兩個方案,分别分四個子產品來解釋
- Controller增加頁面控制方法
- Model增加字段
- View實際頁面
- 實際效果
方案一:
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, 顯示及編輯效果
![]()
MVC4 表單編輯及顯示日期格式 ![]()
MVC4 表單編輯及顯示日期格式
方案二:
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,實際效果![]()
MVC4 表單編輯及顯示日期格式 ![]()
MVC4 表單編輯及顯示日期格式