Greetings, fellow developers! In this tutorial, we'll explore how to integrate a JQuery Calendar to streamline date selection in your ASP.NET applications. Before we dive into the implementation, I strongly recommend checking out my previous tutorials on jQuery, such as calling one page from another using jQuery and textbox validation with jQuery.
HTML Markup: Design Your Page
Let's start by setting up the HTML markup for your ASP.NET page (ASPDA.aspx):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ASPDA.aspx.cs" Inherits="ASPNET_ASPDA" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!------ ADD JQuery ------ >
<!-- ADD CSS Code -- >
</head>
<body>
<form id="form1" runat="server">
<div class="div">
<div>Choose Date From Calendar Using JQuery : </div><br />
<asp:TextBox ID="txtdate" runat="server" CssClass="textdate"></asp:TextBox>
</div>
</form>
</body>
</html>
Add CSS Code:
Style your elements for a clean and consistent look:
<style type="text/css">
.textdate, .div
{
font-family:Times New Roman, Tahoma, Verdana;
font-size:1.2em;
}
.textdate
{
padding:5px 10px 5px 10px;
width:200px;
font-weight:bold;
}
</style>
Add JQuery Code:
Incorporate the necessary jQuery scripts to enable the datepicker functionality:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function () {
$('#txtdate').focusin(function () {
$(this).datepicker({ dateFormat: "dd-mm-yy" });
});
});
</script>
Now, when users focus on the txtdate textbox, a jQuery calendar will appear, allowing them to easily choose the desired date.
Feel free to integrate this feature into your ASP.NET projects and provide users with a seamless and intuitive date selection experience. Happy coding!
0 Comments