Jitesh Byahut 2/25/2014 3311

How To Use Calendar Using JQuery

Here we are using JQuery date picker in Asp.Net

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Jquery-datepicker</title>

    <script src="Scripts/Jquery-ui/js/jquery-1.9.1.js" ></script>

    <scriptsrc="Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js"></script>

   <link href="../../Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" />

    <script type="text/javascript">

        $(document).ready(function () {           

                $("#txtDate").datepicker();              

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">   

    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>   

    </form>

</body>

</html>

View output :

DemoImage

You can change calendar date format

Below are some date formats : -

1. mm/dd/yy - 12/18/2014

2. yy-mm-dd - 2014-12-18

3. d M, y - 18 Dec, 14

4. d MM, y - 18 December, 14

5. DD, d MM, yy - Thursday, 18 December, 2014

$("#txtDate").datepicker({

                    dateFormat: "DD, d MM, yy"

                });

View output :

DemoImage

You can show calendar without using TextBox

use a div to show calendar anywhere.

$("#divDate").datepicker({

                    dateFormat: "d M,y"

                });

View output :

DemoImage

Show month and year in dropdown list in calendar

$("#txtDate").datepicker({

                    changeMonth: true,

                    changeYear: true

                });

View output :

DemoImage

You can show multiple month in a calendar

$("#txtDate").datepicker({

                    numberOfMonths: 3

                });

View output :

DemoImage

Show calendar on image button click

$("#txtDate").datepicker({

                    showOn: "button",

                    buttonImage: "../Images/calendar.gif",

                    buttonImageOnly: true

                });

View output :

DemoImage

You can use animation in calendar

Animation keys - slideDown, fadeIn, blind, bounce, clip, drop, fold, slide

$("#txtDate").datepicker({

                    showAnim: "bounce"                   

                });

View output :

DemoImage

You can disable previous dates

$("#txtDate").datepicker({

                    minDate:0

                });

View output :

DemoImage


Please give your feedback for improving this page