How to add bootstrap datetimepicker to ASP.NET application?

Question

0.00/5 (No votes)

See more:

, +

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:

JavaScript

<%@ 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>&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/bootstrap-datetimepicker.js"></script>
</body>
</html>

Payment Page aspx:

JavaScript

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

C#

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

Posted 21-Jun-20 3:36am

priyamtheone

Updated 22-Jun-20 1:08am

v4

Add a Solution

Comments

F-ES Sitecore 21-Jun-20 9:45am

Starting with the basics, are all of your scripts loading ok? Check the network tab of the dev tools to make sure your js files are being found and loaded ok and that they are not 404ing.

edit: you're loading two versions of jQuery, that's not going to work, you need one version that supports everything you want to do.

priyamtheone 21-Jun-20 13:25pm

I verified the scripts. All are loading properly. Regarding two versions of jQuery, that's a typo. Checked both versions of jQuery by applying them separately. Still, no good.

priyamtheone 21-Jun-20 13:26pm

*** An update ***

I learnt that the eonasdan DateTimePicker is for Bootstrap version 3. It doesn't work with the later versions of Bootstrap. Therefore I shifted to Tempus Dominus DateTimePicker, which is the updated successor of eonasdan DateTimePicker, that works with Bootstrap 4 or later.

Nevertheless, while using Tempus Dominus, though the DateTimePicker is appearing now 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.

Where am I doing wrong this time?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Asif 7969814 · Answer 1 · 2020-06-22T01:09:00

Please go simple use text mode = Date and it will work fine if you want to use only asp.net control use Ajax calendar extender control Here is the Code for both

<asp:TextBox ID="txtLrDate" runat="server"  placeholder="LR-Date" CssClass=" text-primary" onkeydown = "return (event.keyCode!=13);" TabIndex="1"></asp:TextBox>
          <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender2" runat="server" CultureName="en-GB" Mask="99/99/9999" MaskType="Date" PromptCharacter="_" TargetControlID="txtLrDate" />                      
          <ajaxToolkit:CalendarExtender runat="server" TargetControlID="txtLrDate" Format="dd/MM/yyyy" ></ajaxToolkit:CalendarExtender>

For input type date your date format must be iso8 YYYY-MM-DD and it will show local browser date format to user