ASP.NET : Choose Date by Using JQuery Calender


asp.net Choose Date by Using JQuery Calender

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 "

Back To Top