How do i fill the html field with date in asp.net mvc?

I am building a Todo list application

Model class Todo.cs is as below

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; namespace Todo_Application.Models { public class Todo { [Display(Name ="Item Id")] [Required] public int ItemId { get; set; } [Display(Name ="Description")] [Required(ErrorMessage ="Description is required")] [StringLength(100,MinimumLength =10)] public string Description { get; set; } [Display(Name = "Start Date")] [Required(ErrorMessage ="Start date is required")] public DateTime StartDate { get; set; } [Display(Name = "End Date")] [Required(ErrorMessage ="End date is required")] public DateTime EndDate { get; set; } [Display(Name = "Status of completion")] public Status StatusOfCompletion { get; set; } public class SortByStartDate : IComparer<Todo> { public int Compare(Todo x, Todo y) { return x.StartDate.CompareTo(y.StartDate); } } public class SortByEndDate:IComparer<Todo> { public int Compare(Todo x,Todo y) { return x.EndDate.CompareTo(y.EndDate); } } } } 

I have a home controller with index, add and edit as actions as below.

 public class HomeController : Controller { public static List<Todo> ListOfTodos = new List<Todo>() { new Todo() { ItemId=101, Description="Plan the module", StartDate=DateTime.Now, EndDate=DateTime.Now.AddDays(4), StatusOfCompletion=Status.YetToStart}, new Todo() { ItemId=102, Description="Dry run the plan", StartDate=DateTime.Now.AddDays(3), EndDate=DateTime.Now.AddDays(5), StatusOfCompletion=Status.YetToStart } }; public ActionResult Index() { return View(ListOfTodos); } static int max = 0; void maxid() { foreach (var v in ListOfTodos) max = Math.Max(max, v.ItemId); } public ActionResult Add() { maxid(); Session["id"]= max; return View(); } [HttpPost] public ActionResult Add(Todo t) { //if(!ModelState.IsValidField("ItemId")) //{ // ModelState.AddModelError("ItemId", "invalid id"); //} //if(string.IsNullOrEmpty(t.Description)) //{ // ModelState.AddModelError("Description", "Description field is empty"); //} //if (!ModelState.IsValidField("StartDate")) // ModelState.AddModelError("StartDate", "invalid start date"); //if (!ModelState.IsValidField("EndDate")) // ModelState.AddModelError("EndDate", "invalid end date"); //if (!ModelState.IsValidField("StatusOfCompletion")) // ModelState.AddModelError("StatusOfCompletion", "invalid status"); if(ModelState.IsValid) { ListOfTodos.Add(t); return View("Index", ListOfTodos); } //ModelState.AddModelError("", "Invalid data"); return View(); } public ActionResult Delete(int id) { ListOfTodos.Remove(ListOfTodos.Find(m => m.ItemId == id)); return View("Index",ListOfTodos); } public ActionResult Edit(int id) { Todo t = ListOfTodos.Find(m => m.ItemId == id); return View(t); } [HttpPost] public ActionResult Edit(Todo t1) { if (ModelState.IsValid) { Todo t = ListOfTodos.Find(m => m.ItemId == t1.ItemId); t.ItemId = t1.ItemId; t.Description = t1.Description; t.StartDate = t1.StartDate; t.EndDate = t1.EndDate; t.StatusOfCompletion = t1.StatusOfCompletion; return View("Index", ListOfTodos); } return View(); } [HttpPost] public ActionResult SortBy(string Sortby) { Todo t = new Todo(); if (Sortby.Equals("Start Date")) ListOfTodos.Sort(new Todo.SortByStartDate()); else if (Sortby.Equals("End Date")) ListOfTodos.Sort(new Todo.SortByEndDate()); return View("Index", ListOfTodos); } } 

And also the views as below: Index.cshtml

 @model IEnumerable<Todo_Application.Models.Todo> @{ ViewBag.Title = "Index"; int count = 0; } <h2>List of todo items</h2> <a href="/home/add" class="btn btn-primary">Add New Item</a> <form method="post" action="/Home/SortBy"> Sort By @Html.DropDownList("Sortby", new SelectList(new List<string>() { "Start Date", "End Date" }), new { htmlAttributes = new {@class = "form-control"}}) <input type="submit" value="Go" class="btn btn-primary" /> </form> <table class="table table-bordered table-striped"> <thead> <tr> <th>Serial No</th> <th>Item Id</th> <th>Description</th> <th>Start Date</th> <th>End Date</th> <th>Completion Status</th> </tr> </thead> <tbody> @{ foreach(var v in Model) { <tr> <td> @(count=count+1) </td> <td> @v.ItemId </td> <td> @v.Description </td> <td> @v.StartDate.ToShortDateString() </td> <td> @v.EndDate.ToShortDateString() </td> <td> @v.StatusOfCompletion </td> <td> @Html.ActionLink("edit", "Edit", new { id = v.ItemId }) </td> <td> @Html.ActionLink("delete", "Delete", new { id = v.ItemId }) </td> </tr> } } </tbody> </table> 

and Edit.cshtml as below

@model Todo_Application.Models.Todo @{ ViewBag.Title = "Edit"; } <h2>Edit Item</h2> @using (Html.BeginForm("Edit", "Home", FormMethod.Post)) { <div class="col-sm-3"> <div class="form-group"> @Html.EditorFor(m => m.ItemId, new { htmlAttributes = new {@class = "form-control",type="hidden"} }) </div> <div class="form-group"> @Html.LabelFor(m => m.Description) @Html.EditorFor(m => m.Description, new { htmlAttributes = new { @class = "form-control"} }) @Html.ValidationMessageFor(m=>m.Description) </div> <div class="form-group"> @Html.LabelFor(m => m.StartDate) @Html.EditorFor(m => m.StartDate, new { htmlattributes = new { @class = "form-control datepicker", type="date" } }) @Html.ValidationMessageFor(m=>m.StartDate) </div> <div class="form-group"> @Html.LabelFor(m => m.EndDate) @Html.EditorFor(m => m.EndDate, new { htmlattributes = new { @class = "form-control datepicker", type="date"} }) @Html.ValidationMessageFor(m=>m.EndDate) </div> <div class="form-group"> @Html.LabelFor(m => m.StatusOfCompletion) @Html.EnumDropDownListFor(m => m.StatusOfCompletion, new { htmlattributes = new { @class = "form-control" } }) </div> <input type="submit" value="Update" class="btn btn-primary" /> </div> } 

index view just displays all the items. edit view is used to update the item details. The moment I click on the edit link, it takes me to edit view but does not populate the date fields. It populates description field. How to populate the date fields?

Updated: In the home controller, I defined the a list that has values of type Todo. The startdate will be today's date and time. When I displayed on the index page, I just wanna display date which I am able to do by using ToShortDateString(). Now when i click on edit, only the date should be populated and not time. Initially i used a textbox so it used to display both date and time. Later, I added datepicker class , now nothing gets populated instead the format dd/mm/yyyy is shown.