I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
In this article, i will show you, how to show calendar control with disabled past date. I mean to say that if you select date then calendar control disabled all previous day. Also i will provide you, After select a specific date then you don't move to previous months. Lets see an example.
Before example i will teach you about calendar control. If you write following function then you can see full calendar control. If you want to disabled previous date after select specific date then see next example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar Control with Disabled past date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("input[id*='calid']").datepicker({
minDate: new Date(2016,6,1)
});
})
</script>
</head>
<body>
<form id="form1">
<input type="text" id="calid" />
</form>
</body>
</html>
Code Generate the Following code
Before example i will teach you about calendar control. If you write following function then you can see full calendar control. If you want to disabled previous date after select specific date then see next example.
$(function () {Disabled Previous Date:
$("input[id*='calid']").datepicker();
})
$(function () {
$("input[id*='calid']").datepicker({
minDate: new Date(2016,6,1)
});
})
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar Control with Disabled past date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("input[id*='calid']").datepicker({
minDate: new Date(2016,6,1)
});
})
</script>
</head>
<body>
<form id="form1">
<input type="text" id="calid" />
</form>
</body>
</html>
Code Generate the Following code
Comments
Post a Comment