Hi rani,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(string startDate, string endDate)
{
ViewBag.Message = "Start Date: " + startDate + "\\nEnd Date: " + endDate;
return View();
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<form asp-controller="Home" asp-action="Index" method="post">
Start: <input type="text" id="txtStartDate" name="startDate" readonly="readonly" /> <br /> <br />
End: <input type="text" id="txtEndDate" name="endDate" readonly="readonly" />
<br /> <br />
<input type="submit" value="Submit" />
@if (ViewBag.Message != null)
{
<script type="text/javascript">
$(function () {
alert("@ViewBag.Message");
});
</script>
}
<script type="text/javascript">
$(function () {
$('[id*=txtStartDate]').datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("[id*=txtEndDate]").datepicker("option", "minDate", dt);
}
});
$('[id*=txtEndDate]').datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("[id*=txtStartDate]").datepicker("option", "maxDate", dt);
}
});
});
</script>
</form>
</body>
</html>
Screenshot
