Hinabilabolo,
Use MM-DD-YYYY format.
Refer below code.
Model
using System.ComponentModel.DataAnnotations;
public class CustomerModel
{
[Required]
public string PATTERN { get; set; }
[Required(ErrorMessage = "From date required!")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? VALIDFROM { get; set; }
[Required(ErrorMessage = "To date required!")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
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(-19);
return View(model);
}
[HttpPost]
public ActionResult Index(CustomerModel customer)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
else
{
return View(customer);
}
}
}
View
@model From_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">
var dateFormat = 'MM-DD-YYYY';
$(function () {
$("#datetimepicker6").datetimepicker({
format: dateFormat
}).on('dp.change', function (e) {
var from = e.date.format(e.date._f).trim().split('-');
$("#datetimepicker7").datetimepicker('destroy');
$("#datetimepicker7").datetimepicker({
format: dateFormat,
minDate: new Date(from[2], parseInt(from[0]) - 1, from[1])
});
});
var fromDate = $("#hfVALIDFROM").val().trim().split('-');
$("#datetimepicker7").datetimepicker({
format: dateFormat,
minDate: new Date(fromDate[2], parseInt(fromDate[0]) - 1, fromDate[1])
});
});
</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 input-group date" style="width:100%" id="datetimepicker6">
@Html.TextBoxFor(m => m.VALIDFROM, Model.VALIDFROM.Value.ToString(), new { @class = "form-control" })
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
@Html.HiddenFor(m => m.VALIDFROM, new { @id = "hfVALIDFROM" })
</div>
@Html.ValidationMessageFor(a => a.VALIDFROM, "", new { @style = "color:red" })
</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>
@Html.HiddenFor(m => m.VALIDTO)
</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>
