search

tempusdominus / bootstrap-4

Tempus Dominus Bootstrap 4 Datetime Picker
https://getdatepicker.com/5-4/
MIT License
611 stars 239 forks source link

Tempus Dominus not validating date range. #343

Open priyamtheone opened 4 years ago

priyamtheone commented 4 years ago

I'm using Tempus Dominus Bootstrap 4, version 5.0.1 in my ASP.Net application (VS 2017, .Net framework 4.7) along with Bootstrap version 4.5.0.

In my Payment page, while initialising the DateTimePicker in the aspx section, I'm setting the minDate and maxDate options. I'm also setting the format to 'DD/MM/YYYY hh:mm A'. While running the page, when I pop up the calendar control of the DateTimePicker and try to select any date beyond the minDate and maxDate range using the mouse, the control correctly disables the selection and stops me from selecting any invalid date. However, if I write any invalid date beyond the range by using keyboard, the control isn't validating it, therefore allowing invalid date to pass to the server-side. How do I stop it from doing so?

I'm using the updated versions of moment.js and FontAwesome. I've also tried using min and full versions of Tempus Dominus, moment and FontAwesome separately, yet it's showing date beyond the range of minDate and maxDate. Am I missing something or is it an inherent issue?

My code follows below.

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="FontAwesome/css/all.css" rel="stylesheet" />
    <link href="FontAwesome/css/v4-shims.css" rel="stylesheet" />
    <link href="Content/tempusdominus-bootstrap-4.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/bootstrap.min.js"></script>
    <script src="Scripts/moment.js"></script>
    <script src="Scripts/tempusdominus-bootstrap-4.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({
                minDate: "01/01/1753 12:00 AM",
                maxDate: "12/31/9999 11:59 PM",
                format: 'DD/MM/YYYY hh:mm A'
            });
        });

        // 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" name="DateTimeInput" 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" OnClick="btnPay_Click"/>
        </div>
    </div>
</asp:Content>