Hi nabilabolo,
You need to set DateTimeFormat in Global file.
Check this example. Now please take its reference and correct your code.
Model
using System.ComponentModel.DataAnnotations;
public class CustomerModel
{
[Required]
public string PATTERN { get; set; }
[Required]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? VALIDFROM { get; set; }
[Required(ErrorMessage = "To date required!")]
[DataType(DataType.Date)]
public DateTime? VALIDTO { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
CustomerModel model = new CustomerModel();
model.PATTERN = "test";
model.VALIDFROM = DateTime.Today.AddDays(-17);
return View(model);
}
[HttpPost]
public ActionResult Index(CustomerModel customer)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
else
{
return View(customer);
}
}
}
View
@model To_DateTimePicker_MVC.Models.CustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
var dateFormat = 'DD-MM-YYYY';
var $from = $("#datetimepicker6").datetimepicker({
format: dateFormat
}).prop('disabled', true);
var fromDate = $from.prop('disabled', false).datetimepicker().text().trim().split('/');
$("#datetimepicker7").datetimepicker({
format: dateFormat,
minDate: new Date(fromDate[2], parseInt(fromDate[1]) - 1, fromDate[0])
});
});
</script>
</head>
<body class="container">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
<table>
<tr class="spaceUnder">
<td style="width: 100px">
@Html.Label("*", new { style = "color:red" })
@Html.Label("Pattern")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:100%">
@Html.DisplayFor(m => m.PATTERN, Model.PATTERN, new { @class = "form-control" })
@Html.HiddenFor(m => m.PATTERN)
</div>
</td>
</tr>
<tr class="spaceUnder">
<td>
@Html.Label("*", new { style = "color:red" })
@Html.Label("Valid From")
</td>
<td> : </td>
<td>
<div class="col-md-5" style="width:100%" id="datetimepicker6">
@Html.DisplayFor(m => m.VALIDFROM, Model.VALIDFROM.Value.ToString(), new { @class = "form-control", })
@Html.HiddenFor(m => m.VALIDFROM)
</div>
</td>
</tr>
<tr class="spaceUnder">
<td>
@Html.Label("*", new { style = "color:red" })
@Html.Label("Valid To")
</td>
<td> : </td>
<td>
<div class="col-md-5 input-group date" style="width:100%" id='datetimepicker7'>
@Html.TextBoxFor(a => a.VALIDTO, null, new { @class = "form-control" })
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
@Html.ValidationMessageFor(a => a.VALIDTO, "", new { @style = "color:red" })
</td>
</tr>
</table>
<br />
<div class="col-md-12">
<input id="Submit" type="submit" name="ActionType" value="Save" class="btn btn-primary" />
<input id="Reset" type="reset" name="ActionType" value="Reset" class="btn btn-primary" />
</div>
}
</body>
</html>
Global.asax
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
protected void Application_BeginRequest(object sender, EventArgs e)
{
System.Globalization.CultureInfo newCulture =
(System.Globalization.CultureInfo)System.Threading.Thread.CurrentThread.CurrentCulture.Clone();
newCulture.DateTimeFormat.ShortDatePattern = "dd-MM-yyyy";
newCulture.DateTimeFormat.DateSeparator = "/";
System.Threading.Thread.CurrentThread.CurrentCulture = newCulture;
}
}
Screenshot
