Hi SUJAYS,
Check this example. Now please take its reference and correct your code.
Model
using System.ComponentModel.DataAnnotations;
public class PurchaseOrder
{
[Required(ErrorMessage = "Date Required!")]
[Display(Name = "Date : ")]
public string Dateformat { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
PurchaseOrder po = new PurchaseOrder()
{
Dateformat = DateTime.Now.AddDays(-1).AddHours(-1).ToString("MM/dd/yyyy HH:mm")
};
ViewData["Request"] = po;
return View();
}
[HttpPost]
public ActionResult Index(string selectedDateTime)
{
ViewBag.Message = "Selected Date Time : \\n" + selectedDateTime;
return View();
}
}
View
@using DateTimePicker_ViewData_Model_MVC.Models
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@{
PurchaseOrder _Request = ViewData["Request"] as PurchaseOrder;
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="container">
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => _Request.Dateformat, htmlAttributes: new { @class = "control-label" })
@Html.TextBoxFor(m => _Request.Dateformat, new { @class = "Date", id = "txtDateFormat", Name = "selectedDateTime" })
<br /><br />
<input type="submit" value="Submit" />
</div>
</div>
</div>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
<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 () {
$("[id*=txtDateFormat]").datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
});
</script>
@if (ViewBag.Message != null)
{
<script type="text/javascript">
$(function () {
alert("@ViewBag.Message");
});
</script>
}
</body>
</html>
Screenshot
