Please refer following article for TimePicker:
http://aspsnippets.com/Articles/TimePicker-control-in-ASPNet-with-example.aspx
I have made sample for TimePicker using GridView. Please refer following article:
HTML
<%@ Register Assembly="TimePicker" TagPrefix="cc1" Namespace="MKB.TimePicker" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Time Picker 1">
<ItemTemplate>
<cc1:TimeSelector ID="TimeSelector1" runat="server">
</cc1:TimeSelector>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Time Picker 2">
<ItemTemplate>
<cc1:TimeSelector ID="TimeSelector2" runat="server">
</cc1:TimeSelector>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Difference">
<ItemTemplate>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Namespace
using MKB.TimePicker;
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
protected void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] { new DataColumn("TimeSelector1") });
dt.Rows.Add();
dt.Rows.Add();
dt.Rows.Add();
dt.Rows.Add();
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void Submit(object sender, EventArgs e)
{
GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
TimeSelector TimeSelector1 = (row.FindControl("TimeSelector1") as TimeSelector);
TimeSelector TimeSelector2 = (row.FindControl("TimeSelector2") as TimeSelector);
DateTime timePicker1 = DateTime.Parse(string.Format("{0}:{1}:{2} {3}", TimeSelector1.Hour, TimeSelector1.Minute, TimeSelector1.Second, TimeSelector1.AmPm));
DateTime timePicker2 = DateTime.Parse(string.Format("{0}:{1}:{2} {3}", TimeSelector2.Hour, TimeSelector2.Minute, TimeSelector2.Second, TimeSelector2.AmPm));
TimeSpan timeSpan = timePicker1.Subtract(timePicker2);
(row.FindControl("lblMessage").FindControl("lblMessage") as Label).Text = string.Format("Hours: {0} Minutes: {1} Seconds: {2}", timeSpan.Hours, timeSpan.Minutes, timeSpan.Seconds);
}
Screenshot
