JQuery library is one of the most popular javascript library today. Its
an open source library and one can customize it according to users
needs. One of the very popular and widely used function is the date picker functionality of jquery. In this post I will implement the datepicker using jquery in asp page using master page and normal asp page.
Using normal Page is quite simple and start forward.
Using normal Page is quite simple and start forward.
JQuery in Master Page is quite simple too: Below is the code for our master page. This is inside head tag.<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>JQuery Testing</title> <link rel = "Stylesheet" href ="../jquery-ui-1.8.13.custom/development-bundle/demos/demos.css" /> <link rel = "Stylesheet" href ="../jquery-ui-1.8.13.custom/development-bundle/themes/base/jquery.ui.all.css" /> <script src="../Scripts/jquery-1.6.1.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#<%= txtFoo.ClientID %>").datepicker(); }); </script> </head> <body> <form id="form1" runat="server"> <input runat="server" type="text" id="txtFoo" /> </form> </body> </html>
In our content page we will place this code.<link rel = "Stylesheet" href ="../jquery-ui-1.8.13.custom/development-bundle/demos/demos.css" /> <link rel = "Stylesheet" href ="../jquery-ui-1.8.13.custom/development-bundle/themes/base/jquery.ui.all.css" /> <script language="javascript" src="script.js"> </script> <script src="../Scripts/jquery-1.6.1.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
Happy coding!<asp:Content ID="Content1" ContentPlaceHolderID="maincontent" Runat="Server"> <script type="text/javascript"> $(function () { $("#<%= txtFoo.ClientID %>").datepicker(); }); </script> <div id ="reportresults"> <input runat="server" type="text" id="txtFoo"/> </div> </asp:Content>
