I'm working to create a drop down calendar when a input text box is clicked on.
I've been trying to model after this (https://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm).
I've installed jQuery UI Combined using NuGet Package Manager. Though other than the <script> src=...
The entire Test.cshtml file
@{
ViewBag.Title = "Test";
}
<h2>Test</h2>
<div>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-1" ).datepicker();
});
</script>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-1"></p>
</div>
Edit 1: The website is being deployed on an intranet network.
Here is the Layout.cshtml
<!DOCTYPE html>
<html>
<head>
@using System.Security.Principal
@using CalcPayment_WebApp.Models.ViewModels
@using CalcPayment_WebApp.Models.DataBase
@using System.Linq
<meta charset="UTF-8">
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Some Company</title>
<link rel="stylesheet" type="text/css" href="~/Content/StyleSheet.css">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@{
WindowsIdentity identity = HttpContext.Current.Request.LogonUserIdentity;
CheckIdentity(identity);
if (Session["isSysAdmin"] == null || (bool)Session["isSysAdmin"] != true)
{
//show stuff
}
}
@Html.ActionLink("Some Company", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@{
if (Session["isSysAdmin"] != null && (bool) Session["isSysAdmin"] == true)
{
<li>@Html.ActionLink("Customers", "Index", "Customers")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
}
else
{
<li>@Html.ActionLink("Some Company", "Details", "Customers", new { id = Session["UserCID"] }, null)</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
}
}
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Some Company</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<!--Found at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table Used for sorting tables-->
<script>
function sortTable(column,targetTable) {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById(targetTable);
switching = true;
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[column];
y = rows[i + 1].getElementsByTagName("TD")[column];
//check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
@functions {
public void CheckIdentity(WindowsIdentity identity)
{
//Check user identity
}
}
</body>
</html>
