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 installed
Bootstrap.v3.Datetimepicker.CSS 4.17.45 by eonasdan via NuGet Package Manager of Visual Studio. After successful installation, I added relevant js and css references (as defined
here) to the master page and added code to Payment page (as defined
here) to include the DateTimePicker. However, only the textbox of the DateTimePicker is appearing; nothing else is happening.
Image of my Payment page
Am I doing anything wrong? Or is it that this version of DateTimePicker doesn’t work with my version of Bootstrap? Please help me in resolving the issue.
Regards
What I have tried:
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/bootstrap-datetimepicker.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/bootstrap-datetimepicker.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">
$(function () {
$('#datetimepicker1').datetimepicker();
});
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'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</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
{
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)
{
divAlert.Attributes["class"] = "alert alert-success";
divAlert.InnerText = "Payment completed successfully.";
}
}
}