Please refer this article for timepicker:
http://aspsnippets.com/Articles/TimePicker-control-in-ASPNet-with-example.aspx
Please refer the following article for showing time difference betweem two timepicker:
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>
First Time Picker :<cc1:TimeSelector ID="TimeSelector1" runat="server">
</cc1:TimeSelector>
<br />
Second Time Picker :<cc1:TimeSelector ID="TimeSelector2" runat="server">
</cc1:TimeSelector>
<br />
<asp:Button ID="btnSubmit" runat="server" OnClick="Submit" Text="Submit" /><br />
<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DateTime dt = DateTime.Parse("12:35 PM");
MKB.TimePicker.TimeSelector.AmPmSpec am_pm;
if (dt.ToString("tt") == "AM")
{
am_pm = MKB.TimePicker.TimeSelector.AmPmSpec.AM;
}
else
{
am_pm = MKB.TimePicker.TimeSelector.AmPmSpec.PM;
}
TimeSelector1.SetTime(dt.Hour, dt.Minute, am_pm);
}
}
protected void Submit(object sender, EventArgs e)
{
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);
lblMessage.Text = "Time Difference : " + timeSpan.Hours + " : " + timeSpan.Minutes + " : " + timeSpan.Seconds;
}
Screenshot