Ads 468x60px

Pages

Blogroll

Tuesday, February 28, 2012

JQuery Calender


<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Using jQuery UI from the CDN</title>
    <style type="text/css"">
        html, body
        {
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 18px;
            color: #52697E;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="DatepickerDiv">
        Event start date:
        <asp:TextBox ID="txtEventStartDate" runat="server" /><br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /><br />
        <asp:Literal ID="litMessage" runat="server" />
    </div>
    </form>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>

    <link href=" http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />

    <script type="text/javascript">

        $(document).ready(function() {
        var currentYear = (new Date).getFullYear();
        $("#txtEventStartDate").datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                yearRange: '1901:' + currentYear + ''
            });
        });

    </script>

</body>
</html>

0 comments:

Post a Comment