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.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DatePicker.ascx.cs" Inherits="CodeSamples.DatePicker" %>
<link href="css/Jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
Here take one textbox and bind date picker by using JavaScript.
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker();
});
</script>
Date:
<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.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="CodeSamples.Sample" %><%@ Register Src="~/DatePicker.ascx" TagPrefix="uc1" TagName="DatePicker" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:DatePicker runat="server" id="DatePicker" />
</div>
</form>
</body>
</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.