Check the below sample working code. Both validation and datepicker is working.
Model
public class Customer
{
[Required(ErrorMessage = "Id Required.")]
public int EId { get; set; }
[Required(ErrorMessage = "Objective Required.")]
public string EObjective { get; set; }
public DateTime EDate { get; set; }
[Required(ErrorMessage = "Log Required.")]
public string LogRef { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View(new Customer { EId = 1, EObjective = "obj1", LogRef = "ref1", EDate = DateTime.Now });
}
[HttpPost]
public ActionResult Index(Customer customer)
{
return View(customer);
}
}
View
@model _Bootstrap_DatePicker.Models.Customer
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
.text-danger {
color: red;
}
</style>
</head>
<body>
<div>
<strong>Index:</strong>
<div>
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { htmlAttributes = new { @id = "formentrydetails" } }))
{
<table class="table table-striped table-bordered inputfields progresstabs">
<tr>
<td>
@Html.LabelFor(model => model.EId)
</td>
<td>
@Html.EditorFor(model => model.EId, new { htmlAttributes = new { @autocomplete = "off" } })
@Html.ValidationMessageFor(model => model.EId, "", new { @class = "text-danger" })
</td>
<td>@Html.LabelFor(model => model.EObjective)</td>
<td>
@Html.EditorFor(model => model.EObjective, new { htmlAttributes = new { @autocomplete = "off" } })
@Html.ValidationMessageFor(model => model.EObjective, "", new { @class = "text-danger" })
</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.EDate)</td>
<td>
@Html.TextBoxFor(m => m.EDate, "{0:dddd, dd MMMM yyyy}", htmlAttributes: new { id = "datepicker", @autocomplete = "off" })
</td>
<td>@Html.LabelFor(model => model.LogRef)</td>
<td>
@Html.EditorFor(model => model.LogRef, new { htmlAttributes = new { @autocomplete = "off" } })
@Html.ValidationMessageFor(model => model.LogRef, "", new { @class = "text-danger" })
</td>
</tr>
</table>
<br />
<input type="submit" name="" value="Save" />
}
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
format: "DD, MM dd, yyyy"
});
});
</script>
</body>
</html>
