By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,068 Members | 1,210 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,068 IT Pros & Developers. It's quick & easy.

How to add Bootstrap DateTimePicker to ASP.Net application?

P: 81
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 file. 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:
Expand|Select|Wrap|Line Numbers
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeFile="User.master.cs" Inherits="User" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6. <head runat="server">
  7.     <!-- Required meta tags -->
  8.     <meta charset="utf-8"/>
  9.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  10.  
  11.     <!-- JQuery references -->
  12.     <script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  13.  
  14.     <!-- Bootstrap CSS references -->
  15.     <link href="Content/bootstrap.min.css" rel="stylesheet" />
  16.     <link href="Content/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
  17.     <link href="Content/CustomStyleSheet.css" rel="stylesheet" />
  18.  
  19.     <!--***** JQuery code *****-->
  20.     <!-- 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. -->
  21.     <script>
  22.         $(document).ready(function DocumentReady() {
  23.             $("#btnCart").click(function btnCart_Click() {
  24.                 window.location.href = "/Cart.aspx";
  25.             });
  26.         });
  27.     </script>
  28.     <!--***** End *****-->
  29.  
  30.     <title>Responsive Website</title>
  31. </head>
  32. <body>
  33.     <form id="form1" runat="server">
  34.         <div>
  35.             <!--***** Navigation Bar, Logo, Dropdown Menu *****-->
  36.             <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  37.                 <a class="navbar-brand" href="Default.aspx">
  38.                     <img src="Images/web.png" width="30" height="30" class="d-inline-block align-top" alt="Logo" />
  39.                     Repsonsive Website
  40.                 </a>
  41.                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  42.                     <span class="navbar-toggler-icon"></span>
  43.                 </button>
  44.                 <div class="collapse navbar-collapse" id="navbarNavDropdown">
  45.                     <ul class="navbar-nav float-right">
  46.                         <li class="nav-item active">
  47.                             <a class="nav-link" href="Default.aspx">Home<span class="sr-only">(current)</span></a>
  48.                         </li>
  49.                         <li class="nav-item">
  50.                             <a class="nav-link" href="#">About</a>
  51.                         </li>
  52.                         <li class="nav-item">
  53.                             <a class="nav-link" href="#">Contact</a>
  54.                         </li>
  55.                         <li class="nav-item dropdown">
  56.                             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  57.                                 Products
  58.                             </a>
  59.                             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  60.                                 <a class="dropdown-item" href="Products.aspx">All Products</a>
  61.                                 <div class="dropdown-divider" role="separator"></div>
  62.                                 <label class="dropdown-header">Men's</label>
  63.                                 <a class="dropdown-item" href="#">Shirts</a>
  64.                                 <a class="dropdown-item" href="#">Pants</a>
  65.                                 <a class="dropdown-item" href="#">Denims</a>
  66.                                 <div class="dropdown-divider" role="separator"></div>
  67.                                 <label class="dropdown-header">Women's</label>
  68.                                 <a class="dropdown-item" href="#">Tops</a>
  69.                                 <a class="dropdown-item" href="#">Leggings</a>
  70.                                 <a class="dropdown-item" href="#">Denims</a>
  71.                             </div>
  72.                         </li>
  73.                         <li class="nav-item">
  74.                             <button id="btnCart" type="button" class="btn btn-primary navbar-btn">
  75.                                 Cart <span id="CartBadge" class="badge badge-light" runat="server"></span>
  76.                             </button>
  77.                         </li>
  78.                         <li class="nav-item">
  79.                             <asp:Button ID="btnSignIn" runat="server" class="btn btn-light navbar-btn" Text="Sign In" OnClick="btnSignIn_Click" CausesValidation="False" />
  80.                             <asp:Button ID="btnSignOut" runat="server" class="btn btn-light navbar-btn" Text="Sign Out" Visible="false" OnClick="btnSignOut_Click" CausesValidation="False" />
  81.                         </li>
  82.                         <li class="nav-item">
  83.                             <asp:Button ID="btnSignUp" runat="server" class="btn btn-light navbar-btn" Text="Sign Up" OnClick="btnSignUp_Click" CausesValidation="False" />
  84.                         </li>
  85.                     </ul>
  86.                 </div>
  87.             </nav>
  88.             <!--***** End *****-->
  89.             <div class="container midcontent">
  90.                 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
  91.                 </asp:ContentPlaceHolder>
  92.             </div>
  93.         </div>
  94.         <!--***** Footer *****-->
  95.         <hr />  <!-- Used to provide a separator between middle contents and footer. -->
  96.         <footer>
  97.             <div class="container">
  98.                 <div id="BackToTop" runat="server" class="float-right" visible="false"><a href="#">Back to top</a></div>
  99.                 <p>&copy; 2020 domainname.com &middot; <a href="Default.aspx">Home</a> &middot; <a href="#">About</a> &middot; <a href="#">Contact</a> &middot; <a href="#">Products</a></p>
  100.             </div>
  101.         </footer>
  102.         <!--***** End *****-->
  103.     </form>
  104.     <!-- Optional JavaScript -->
  105.     <!-- References: jQuery first, then Popper.js, then Bootstrap JS -->
  106.     <script src="Scripts/jquery-3.0.0.min.js"></script>
  107.     <script src="Scripts/umd/popper.min.js"></script>
  108.     <script src="Scripts/moment.min.js"></script>
  109.     <script src="Scripts/bootstrap.min.js"></script>
  110.     <script src="Scripts/tempusdominus-bootstrap-4.min.js"></script>
  111. </body>
  112. </html>
Payment Page aspx:
Expand|Select|Wrap|Line Numbers
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/User.master" AutoEventWireup="true" CodeFile="Payment.aspx.cs" Inherits="Payment" %>
  2.  
  3. <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  4.     <script type="text/javascript">
  5.         // Initialise DateTimePicker.
  6.         $(function () {
  7.             $('#datetimepicker1').datetimepicker();
  8.         });
  9.  
  10.         // Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
  11.         function Client_ValidatePin(source, arguments) {
  12.             arguments.IsValid = /^[0-9]{6}$/.test(arguments.Value);
  13.         }
  14.     </script>
  15.     <div id="divAlert" role="alert" runat="server">
  16.     </div>
  17.     <div class="row">
  18.         <div class="col-md-9">
  19.             <h4>Payment</h4>
  20.             <hr />
  21.             <div class="form-group row">
  22.                 <asp:Label ID="Label1" runat="server" class="col-md-2 col-form-label" Text="Name:"></asp:Label>
  23.                 <div class="col-md-7">
  24.                     <asp:TextBox ID="txtName" class="form-control" runat="server" MaxLength="50"></asp:TextBox>
  25.                     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" class="text-danger" ErrorMessage="Name is required!" ControlToValidate="txtName"></asp:RequiredFieldValidator>
  26.                 </div>
  27.             </div>
  28.             <div class="form-group row">
  29.                 <asp:Label ID="Label2" runat="server" class="col-md-2 col-form-label" Text="PIN:"></asp:Label>
  30.                 <div class="col-md-7">
  31.                     <asp:TextBox ID="txtPin" class="form-control" runat="server" MaxLength="6"></asp:TextBox>
  32.                     <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>
  33.                 </div>
  34.             </div>
  35.             <div class="form-group row">
  36.                 <asp:Label ID="Label3" runat="server" class="col-md-2 col-form-label" Text="Date/Time:"></asp:Label>
  37.                 <div class="col-md-7">
  38.                     <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
  39.                         <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
  40.                         <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
  41.                             <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.             <asp:Button ID="btnPay" runat="server" Text="Make Payment" />
  47.         </div>
  48.     </div>
  49. </asp:Content>
Payment Page Code-behind:
Expand|Select|Wrap|Line Numbers
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7.  
  8. public partial class Payment : System.Web.UI.Page
  9. {
  10.     protected void Page_Load(object sender, EventArgs e)
  11.     {
  12.         if (IsPostBack)
  13.         {
  14.             divAlert.InnerText = string.Empty;
  15.             divAlert.Attributes["class"] = "d-none";
  16.         }
  17.     }
  18.  
  19.     protected void PinValidator_ServerValidate(object source, ServerValidateEventArgs args)
  20.     {
  21.         try
  22.         {
  23.             // Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
  24.             args.IsValid = System.Text.RegularExpressions.Regex.IsMatch(args.Value, "^[0-9]{6}$");
  25.         }
  26.  
  27.         catch (Exception ex)
  28.         { args.IsValid = false; }
  29.     }
  30.  
  31.     protected void btnPay_Click(object sender, EventArgs e)
  32.     {
  33.         if (Page.IsValid)
  34.         {
  35.             // Write code for payment.
  36.  
  37.             // If payment is successful...
  38.             divAlert.Attributes["class"] = "alert alert-success";
  39.             divAlert.InnerText = "Payment completed successfully.";
  40.         }
  41.     }
  42. }
2 Weeks Ago #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.