Hi bigbear,
Check this example. Now please take its reference and correct your code.
Namespaces
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
Model
public class User
{
[Required]
[DisplayName("User Name")]
public string UserName { get; set; }
[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[DisplayName("Birth Date")]
public DateTime Birthday { get; set; }
[DataType(DataType.DateTime)]
[DisplayName("Date Created")]
public DateTime DateCreated { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
User user = new User();
user.UserName = "Dharmendra";
return View(user);
}
[HttpPost]
public ActionResult Index(User user)
{
ViewData["BirthDate"] = user.Birthday.ToString("MM/dd/yyyy");
ViewData["CreatedDate"] = user.DateCreated.ToString("MM/dd/yyyy");
return View();
}
}
View
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script>
$(function () {
$("#DateCreated").attr("class", "form-control datepicker");
// DATEPICKER JQUERY ADDITION
$(".datepicker").datepicker({
dateFormat: "MM/dd/yy",
changeYear: true,
shownOn: "button",
})
.css("display", "inline-block")
.next("button")
.button({
icons: { primary: "ui-icon-calendar" },
label: "Select a Date",
text: false
});
})
</script>
</head>
<body>
<% using (Html.BeginForm("Index", "Home")) {%>
<table>
<tr>
<td><%: Html.LabelFor(model => model.UserName) %></td>
<td><%: Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })%></td>
</tr>
<tr>
<td><%: Html.LabelFor(model => model.Birthday)%></td>
<td><%: Html.TextBoxFor(model => model.Birthday, new { @class = "form-control datepicker" })%></td>
</tr>
<tr>
<td><%: Html.LabelFor(model => model.DateCreated)%></td>
<td><%: Html.EditorFor(model => model.DateCreated, new { @class = "form-control datepicker" })%></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Save" class="btn btn-primary" /></td>
</tr>
</table>
<% } %>
<%if (ViewData["BirthDate"] != null) {%>
<b>Selected Birth Date : </b><%=ViewData["BirthDate"] %>
<% } %>
<br />
<%if (ViewData["CreatedDate"] != null) {%>
<b>Selected Created Date : </b><%=ViewData["CreatedDate"]%>
<% } %>
</body>
</html>
Screenshot
