How to add Bootstrap DateTimePicker to ASP.Net application?

88 64KB

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

 <%@ 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>&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>

            </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:

Expand|Select|Wrap|Line Numbers

 <%@ 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:

Expand|Select|Wrap|Line Numbers

 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.";

        }

    }

}

Jun 21 '20 #1

Subscribe Post Reply

6680

by: Guy | last post by:

I have extended the datetimepicker control to incorporate a ReadOnly property. I have used the new keyword to implement my own version of the value property, so that if readonly == true then it...

C# / C Sharp

DateTimePicker Checked Property (Bug In Control?)

by: John Smith | last post by:

Hey folks, Got some strange behavior going on here. I have a datetimepicker with showcheckbox = true; If I set Checked=true and set the Text of the datetimepicker, then then the Checked...

C# / C Sharp

.NET application without .NET Framework

by: Rajiv | last post by:

Hello, Can some one guide me on how do i make a .NET application which upon installing on the target system doesnot require a .NET Framework Installed? Bye Rajiv

C# / C Sharp

DateTimePicker + DataBinding + Null-Value: THE solution?

by: Pieter | last post by:

Hi, I'm looking for a DateTimePicker that supports 100% databinding (and support null-values)... It's a shame that the normal control doesn't, but when searching on the internet, I didn't find...

.NET Framework

dual python / bootstrap RPM woes

by: | last post by:

Greetings. In an effort to get python2.4 on my Centos 3.7, I installed the python bootstrap rpm. This installed 2.4 alongside 2.2 and updated yum to 2.4.0. Oddly, it didn't create a symlink...

Python

How to deploy ASP.NET 2.0 INTRANET application?

by: tomix | last post by:

Hi, I need to deploy INTRANET ASP.NET 2.0 application and i would like to ask ig the following can be done using windows installer: 1.Install sql server express(must i add it to the...

ASP.NET

ComboBox DateTimePicker Binding Focus Bug / Mess

by: Simon Tamman | last post by:

I've come across an interesting bug. I have workarounds but i'd like to know the root of the problem. I've stripped it down into a short file and hope someone might have an idea about what's going...

C# / C Sharp

.Net packaging/wrapper application?

by: jim | last post by:

I am looking for an application that will wrap my .Net application (and any needed .Net parts) into a single exe. I know of Thinstall ($4,000 for application and per copy fees for your exes) and...

.NET Framework

Creating an Installer for a C# Application

by: nelsonbrodyk | last post by:

Hey All, I have an application that I have been using clickonce for up to this point. The issue is that clickonce is limiting the use for this application in areas. One of the areas has to do with...

.NET Framework

Unable to apply Bootstrap ScrollSpy in a page

by: neovantage | last post by:

Hi, I am trying to implement Bootstrap Scrollspy in my content page but unable to do that. I also used Affix in that code which is working perfectly fine. I used the ethics advised by bootstrap but...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

How to add Bootstrap DateTimePicker to ASP.Net application?

Similar topics