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.
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.";
}
}
}
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.
There are several issues with the code. The standard bootstrap datepicker must be applied to an text input not a div. Inputs must have a name otherwise the browser does not submit the input. ASP.NET Validator controls work with server controls and there
is no validator for the date input.
There are several bootstrap 4 date pickers which can be found with a Google search.
The DatePicker of the link you shared is good, but it doesn't seem to have a time component. My project requires a control that has both date and time components attached together, hence, I chose eonasdan DateTimePicker. However, 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.
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.
Seems like the documentation of Tempus Dominus has curiously missed significant reference of FontAwesome. Hence, had to go through a lot of head scratching to integrate FontAwesome to .Net and make it work with Tempus Dominus DateTimePicker.
Anyway, after up & running, now I face two quests. One is, how do I set the value of the DateTimePicker from code-behind while fetching data values from the database programmatically? You've already shown how to get the value
from the DateTimePicker:
string date = Request["datetimeinput"];
But how to do the reverse?
The second problem is a bit weird. While initialising the DateTimePicker in the aspx page, I'm setting the minDate and maxDate options:
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 with 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? Kindly assist.
None
0 Points
15 Posts
How to add Bootstrap DateTimePicker to ASP.Net application?
Jun 21, 2020 02:41 PM|priyamtheone|LINK
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 is here.
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>© 2020 domainname.com · <a href="Default.aspx">Home</a> · <a href="#">About</a> · <a href="#">Contact</a> · <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."; } } }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
All-Star
53051 Points
23644 Posts
Re: How to add Bootstrap DateTimePicker to ASP.Net application?
Jun 21, 2020 03:06 PM|mgebhard|LINK
There are several issues with the code. The standard bootstrap datepicker must be applied to an text input not a div. Inputs must have a name otherwise the browser does not submit the input. ASP.NET Validator controls work with server controls and there is no validator for the date input.
There are several bootstrap 4 date pickers which can be found with a Google search.
https://bootstrap-datepicker.readthedocs.io/en/latest/
None
0 Points
15 Posts
Re: How to add Bootstrap DateTimePicker to ASP.Net application?
Jun 21, 2020 04:56 PM|priyamtheone|LINK
Hi mgebhard,
Thanks for your reply.
The DatePicker of the link you shared is good, but it doesn't seem to have a time component. My project requires a control that has both date and time components attached together, hence, I chose eonasdan DateTimePicker. However, 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.
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.
Where am I doing wrong this time?
All-Star
53051 Points
23644 Posts
Re: How to add Bootstrap DateTimePicker to ASP.Net application?
Jun 21, 2020 06:45 PM|mgebhard|LINK
So you question is how to use the Tempus Dominus library. The docs are very clear you just need to add a name attribute to the text input.
<div class="container"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <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> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div>You can get the value using standard syntax.
Or use a standard TextBox server control. The assignment will change to...
$('#<%=datetimepicker1.ClientID%>').datetimepicker();Lastly, fa-calendar is a font awesome icon.
https://fontawesome.com/v4.7.0/icon/calendar
All-Star
58224 Points
15671 Posts
Re: How to add Bootstrap DateTimePicker to ASP.Net application?
Jun 21, 2020 08:00 PM|bruce (sqlwork.com)|LINK
Bootstrap 4 does not include an icon library. You must pick one and add to the project. See
https://getbootstrap.com/docs/4.0/extend/icons/
None
0 Points
15 Posts
Re: How to add Bootstrap DateTimePicker to ASP.Net application?
Jun 28, 2020 03:54 PM|priyamtheone|LINK
Hi mgebhard,
Seems like the documentation of Tempus Dominus has curiously missed significant reference of FontAwesome. Hence, had to go through a lot of head scratching to integrate FontAwesome to .Net and make it work with Tempus Dominus DateTimePicker.
Anyway, after up & running, now I face two quests. One is, how do I set the value of the DateTimePicker from code-behind while fetching data values from the database programmatically? You've already shown how to get the value from the DateTimePicker:
But how to do the reverse?
The second problem is a bit weird. While initialising the DateTimePicker in the aspx page, I'm setting the minDate and maxDate options:
<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' }); }); </script>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 with 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? Kindly assist.