Hi nadeem1218,
The DisplayFormat attribute is only used in EditorFor / DisplayFor and not for TextBoxFor.
So you have to use bootstrap datepicker format as mm/dd/yyyy.
Check this example. Now please take its reference and correct your code.
Model
public class DateModel
{
[Required]
public int EmpId { get; set; }
[Required]
public int ProductionLine { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
[Required]
public DateTime Date { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(DateModel model)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
return View(model);
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<script type="text/javascript" defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
<script type="text/javascript" defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" 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 type="text/javascript">
$(document).ready(function () {
$('.date-picker').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
language: "tr"
});
})
</script>
</head>
<body>
<div>
<%using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
<div class="container">
<%:Html.AntiForgeryToken() %>
<%:Html.ValidationSummary(false, "", new { @class = "text-danger" })%>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<%:Html.LabelFor(model => model.EmpId)%>
</div>
<div class="col-md-4">
<%:Html.TextBoxFor(m => m.EmpId, new { @class = "form-control" })%>
<%:Html.ValidationMessageFor(model => model.EmpId, "", new { @class = "text-danger" })%>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<%:Html.LabelFor(model => model.ProductionLine)%>
</div>
<div class="col-md-4">
<%:Html.TextBoxFor(m => m.ProductionLine, new { @class = "form-control" })%>
<%:Html.ValidationMessageFor(model => model.ProductionLine, "", new { @class = "text-danger" })%>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<%:Html.LabelFor(model => model.Date)%>
</div>
<div class="col-md-4">
<div class="input-group">
<%:Html.TextBoxFor(m => m.Date, new { @class = "form-control date-picker", autocomplete = "off" })%>
<label for="Date" class="input-group-addon btn">
<span class="fa fa-calendar-alt"></span>
</label>
</div>
</div>
</div>
</div>
<input type="submit" value="Save" class="btn btn-success" />
</div>
<%} %>
</div>
</body>
</html>
Screenshot
