I’m working with Visual Studio 2017 and Bootstrap 4.5.0. Under a master page, I have a Payment page that contains a txtName textbox, a txtPin textbox and btnPay button. To this, I want to add a DateTimePicker. When btnPay is clicked, values of txtName, txtPin and DateTimePicker should be saved to the database.
To implement this idea, I'm using Tempus Dominus DateTimePicker, that works with Bootstrap 4 or later. It's the updated successor of Bootstrap.v3.Datetimepicker.CSS 4.17.45 by eonasdan.
However, while using Tempus Dominus, though the DateTimePicker is appearing and its functions are working properly on the page, no icons of the DateTimePicker or the Calendar control are appearing. See the images of date panel and time panel. The points circled in red are where the icons are supposed to be.
As I couldn't find any NuGet installation package for Tempus Dominus, I downloaded moment.min.js, tempusdominus-bootstrap-4.min.js and tempusdominus-bootstrap-4.min.css separately from URLs mentioned in the CDNJS section of this page. I added them to the scripts and content folders of my project, added the references of moment.min.js, tempusdominus-bootstrap-4.min.js and tempusdominus-bootstrap-4.min.css to the master page. Then, in the Payment page I added the javascript function to initialise the DateTimePicker. Still, no icon of the DateTimePicker control can be seen.
The problem still persists even if I use the full versions of moment.js, tempusdominus-bootstrap-4.js and tempusdominus-bootstrap-4.css.
What am I doing wrong?
Master Page aspx:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="User.master.cs" Inherits="User" %>
<!DOCTYPE html>
<html>
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- JQuery references -->
<script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS references -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<link href="Content/CustomStyleSheet.css" rel="stylesheet" />
<!--***** JQuery code *****-->
<!-- After the DOM is ready to execute Javascript, add a click event to the Cart button. When the button is clicked, the user will be taken to the Cart.aspx page. -->
<script>
$(document).ready(function DocumentReady() {
$("#btnCart").click(function btnCart_Click() {
window.location.href = "/Cart.aspx";
});
});
</script>
<!--***** End *****-->
<title>Responsive Website</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--***** Navigation Bar, Logo, Dropdown Menu *****-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="Default.aspx">
<img src="Images/web.png" width="30" height="30" class="d-inline-block align-top" alt="Logo" />
Repsonsive Website
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav float-right">
<li class="nav-item active">
<a class="nav-link" href="Default.aspx">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="Products.aspx">All Products</a>
<div class="dropdown-divider" role="separator"></div>
<label class="dropdown-header">Men's</label>
<a class="dropdown-item" href="#">Shirts</a>
<a class="dropdown-item" href="#">Pants</a>
<a class="dropdown-item" href="#">Denims</a>
<div class="dropdown-divider" role="separator"></div>
<label class="dropdown-header">Women's</label>
<a class="dropdown-item" href="#">Tops</a>
<a class="dropdown-item" href="#">Leggings</a>
<a class="dropdown-item" href="#">Denims</a>
</div>
</li>
<li class="nav-item">
<button id="btnCart" type="button" class="btn btn-primary navbar-btn">
Cart <span id="CartBadge" class="badge badge-light" runat="server"></span>
</button>
</li>
<li class="nav-item">
<asp:Button ID="btnSignIn" runat="server" class="btn btn-light navbar-btn" Text="Sign In" OnClick="btnSignIn_Click" CausesValidation="False" />
<asp:Button ID="btnSignOut" runat="server" class="btn btn-light navbar-btn" Text="Sign Out" Visible="false" OnClick="btnSignOut_Click" CausesValidation="False" />
</li>
<li class="nav-item">
<asp:Button ID="btnSignUp" runat="server" class="btn btn-light navbar-btn" Text="Sign Up" OnClick="btnSignUp_Click" CausesValidation="False" />
</li>
</ul>
</div>
</nav>
<!--***** End *****-->
<div class="container midcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!--***** Footer *****-->
<hr /> <!-- Used to provide a separator between middle contents and footer. -->
<footer>
<div class="container">
<div id="BackToTop" runat="server" class="float-right" visible="false"><a href="#">Back to top</a></div>
<p>© 2020 domainname.com · <a href="Default.aspx">Home</a> · <a href="#">About</a> · <a href="#">Contact</a> · <a href="#">Products</a></p>
</div>
</footer>
<!--***** End *****-->
</form>
<!-- Optional JavaScript -->
<!-- References: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/umd/popper.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/tempusdominus-bootstrap-4.min.js"></script>
</body>
</html>Payment Page aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/User.master" AutoEventWireup="true" CodeFile="Payment.aspx.cs" Inherits="Payment" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
// Initialise DateTimePicker.
$(function () {
$('#datetimepicker1').datetimepicker();
});
// Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
function Client_ValidatePin(source, arguments) {
arguments.IsValid = /^[0-9]{6}$/.test(arguments.Value);
}
</script>
<div id="divAlert" role="alert" runat="server">
</div>
<div class="row">
<div class="col-md-9">
<h4>Payment</h4>
<hr />
<div class="form-group row">
<asp:Label ID="Label1" runat="server" class="col-md-2 col-form-label" Text="Name:"></asp:Label>
<div class="col-md-7">
<asp:TextBox ID="txtName" class="form-control" runat="server" MaxLength="50"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" class="text-danger" ErrorMessage="Name is required!" ControlToValidate="txtName"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group row">
<asp:Label ID="Label2" runat="server" class="col-md-2 col-form-label" Text="PIN:"></asp:Label>
<div class="col-md-7">
<asp:TextBox ID="txtPin" class="form-control" runat="server" MaxLength="6"></asp:TextBox>
<asp:CustomValidator ID="PinValidator" runat="server" ControlToValidate="txtPin" ValidateEmptyText="true" ClientValidationFunction="Client_ValidatePin" OnServerValidate="PinValidator_ServerValidate" class="text-danger" Display="Static" ErrorMessage="A 6-digit number is required!"></asp:CustomValidator>
</div>
</div>
<div class="form-group row">
<asp:Label ID="Label3" runat="server" class="col-md-2 col-form-label" Text="Date/Time:"></asp:Label>
<div class="col-md-7">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnPay" runat="server" Text="Make Payment" />
</div>
</div>
</asp:Content>Payment Page Code-behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Payment : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
divAlert.InnerText = string.Empty;
divAlert.Attributes["class"] = "d-none";
}
}
protected void PinValidator_ServerValidate(object source, ServerValidateEventArgs args)
{
try
{
// Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
args.IsValid = System.Text.RegularExpressions.Regex.IsMatch(args.Value, "^[0-9]{6}$");
}
catch (Exception ex)
{ args.IsValid = false; }
}
protected void btnPay_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// Write code for payment.
// If payment is successful...
divAlert.Attributes["class"] = "alert alert-success";
divAlert.InnerText = "Payment completed successfully.";
}
}
}