DatePicker User Control

User Control:

A user control is a kind of composite control that works much like an ASP.NET Web page—you can add existing Web server controls and markup to a user control, and define properties and methods for the control. You can then embed them in ASP.NET Web pages, where they act as a unit.

Here in this example, you can see how to use date picker user control in web page.

For that, create a user control and add CSS and JS files whatever you required for date picker.

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DatePicker.ascx.cs" Inherits="CodeSamples.DatePicker" %>  
  2. <link href="css/Jquery-ui.css" rel="stylesheet" />  
  3. <script src="js/jquery-1.10.2.js"></script>  
  4. <script src="js/jquery-ui.js"></script>  
  5. Here take one textbox and bind date picker by using JavaScript.  
  7. <script type="text/javascript">  
  8. $(function () {  
  9. $("#datepicker").datepicker();  
  10. });  
  11. </script>  
  12. Date:   
  13. <input type="text" id="datepicker">  
Now user control is completed with date picker. Now you can this user control wherever you want in web pages with taking this user control as reference.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="CodeSamples.Sample" %><%@ Register Src="~/DatePicker.ascx" TagPrefix="uc1" TagName="DatePicker" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.     </head>  
  8.     <body>  
  9.         <form id="form1" runat="server">  
  10.             <div>  
  11.                 <uc1:DatePicker runat="server" id="DatePicker" />  
  12.             </div>  
  13.         </form>  
  14.     </body>  
  15. </html>  
Then the output will be as follows:

Figure 1: Calendar

Like this you can easily work with user controls and your work also very simple.