Hello Friends,
In these article we see how to Perform JQuery Calendar on choosing Date Choose Date by Using JQuery Calendar . Before go through this tutorial i'm strongly recommended you to read my previous tutorials : How to call one page to another page by using JQuery and another article is How to Validate Textbox Data doesn't allow empty value by using JQuery.
HTML Markup : Design Page
<%@ 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 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
<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>
0 Komentar untuk "ASP.NET : Choose Date by Using JQuery Calender "