Click here to Skip to main content
14,579,188 members
Rate this:
Please Sign up or sign in to vote.
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>&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:
<%@ 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:
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
Updated 22-Jun-20 1:08am
v4
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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
   
Comments
priyamtheone 21hrs ago
   
Hi,

Sorry for late reply.

Are you implying to avoid those JavaScript-based DateTimePicker controls randomly available on the internet and rely on ASP.Net controls? If so, then I too think likewise. After going through a few articles, it seems that these JavaScript-based controls are not consistent enough or full-proof across browsers. I think it's wiser to use ASP.Net textbox control with TextMode="Date" or TextMode="Time" accordingly.

By the way, you mentioned about Ajax Calendar Extender Control. Would you please share the link for its tutorial and download?

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100