This is a timer text box, which we can enter only time and we have a drop down list which we can select am pm option.
CodeProject
java script code is below
<script type="text/javascript">
//<!--
Sys.Application.add_load(BindEvents);
function BindEvents() {
$(document).ready(function() {
var controlDisable = '<%=Disable %>';
var txtTime = $('#<%=txtTime.ClientID %>');
var ddlAmPm = $('#<%=ddlAmPm.ClientID %>');
if ((typeof txtTime != 'undefined') && (txtTime.val()) && (txtTime.val().length) && txtTime && txtTime.val().length > 0 && txtTime.val().substring(0, 2) == '00') {
ddlAmPm.attr("selectedIndex", 0);
ddlAmPm.attr("disabled", "true");
}
else {
ddlAmPm.removeAttr('disabled');
}
txtTime.keyup(function(e) {
if (e.keyCode != 8 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40 && e.which != 8 && e.which != 37 && e.which != 38 && e.which != 39 && e.which != 40) {
var timeText = txtTime.val();
if (timeText.length >= 2) {
var hour = timeText.substring(0, 2);
var min = timeText.substring(3, 5);
if (hour > 12) {
hour = 12;
}
else {
if (hour < 0) {
hour = 00;
}
}
if (min < 0) {
min = 00;
}
else {
if (min > 59)
min = 59;
}
if (timeText.substring(1, 2) != ":") {
txtTime.val('');
txtTime.val(hour + ':' + min);
}
}
if (hour == '00') {
ddlAmPm.attr("selectedIndex", 0);
ddlAmPm.attr("disabled", "true");
}
else {
ddlAmPm.removeAttr('disabled');
}
}
});
txtTime.focusout(function(e) {
if (txtTime.val() == '') {
txtTime.val("00" + ':' + "00");
}
});
if (controlDisable == "True") {
txtTime.attr("disabled", "true");
ddlAmPm.attr("disabled", "true");
}
else {
txtTime.attr("enabled", "true");
ddlAmPm.attr("enabled", "true");
}
});
}
function GetInstantTime() {
var ddlAmPm = $('#<%=ddlAmPm.ClientID %>');
var txtTime = $('#<%=txtTime.ClientID %>');
var timeText = txtTime.val();
var time=timeText + " " + ddlAmPm.val();
return time;
}
//-->
</script>
HTML is given below
<table>
<tr>
<td runat="server" visible="false" id="tdLabelText">
<asp:Label ID="lblTimeText" runat="server" CssClass="globalTextBold"/>
</td>
<td valign="top">
<des:IntegerTextBox ID="txtTime" runat="server" Width="45px" CssClass="inputText" MaxLength="5"></des:IntegerTextBox>
</td>
<td valign="top">
<asp:DropDownList ID="ddlAmPm" runat="server" Width="50px" CssClass="inputText">
</asp:DropDownList>
</td>
</tr>
</table>
Code behind is given below
/// <summary>
/// This class defines the methods for managing Time Picker control
/// </summary>
public partial class TimePickerControl : ControlBase
{
#region Constants
/// <summary>
/// Constant string for Zero.
/// </summary>
private const string ZERO = "0";
/// <summary>
/// Constant string for ZeroZero.
/// </summary>
private const string ZEROZERO = "00";
/// <summary>
/// Constant int for Twelve.
/// </summary>
private const int TWELVE = 12;
/// <summary>
/// Constant int for Sero.
/// </summary>
private const int SERO = 0;
/// <summary>
/// Constant int for One.
/// </summary>
private const int ONE = 1;
#endregion
#region Public Properties
/// <summary>
/// Gets or sets the time.
/// </summary>
/// <value>The time.</value>
public string Time
{
get
{
if (!string.IsNullOrEmpty(txtTime.Text))
{
return txtTime.Text + " " + ddlAmPm.SelectedItem.Text;
}
else
{
return string.Empty;
}
}
set
{
this.SetTime(value);
}
}
/// <summary>
/// Sets a value indicating whether [read only].
/// </summary>
/// <value><c>true</c> if [read only]; otherwise, <c>false</c>.</value>
public bool ReadOnly
{
set
{
txtTime.ReadOnly = value;
ddlAmPm.Enabled = !value;
}
}
public string LabelText
{
set
{
lblTimeText.Text = value;
if (lblTimeText.Text != string.Empty)
{
tdLabelText.Visible = true;
}
else
{
tdLabelText.Visible = false;
}
}
}
/// <summary>
/// Sets a value indicating whether this <see cref="TimePickerControl"/> is enable.
/// </summary>
/// <value><c>true</c> if enable; otherwise, <c>false</c>.</value>
public bool Disable
{
get;
set;
}
public string TimeTextClientID
{
get
{
return this.txtTime.ClientID;
}
}
public string DropdownClientID
{
get
{
return this.ddlAmPm.ClientID;
}
}
#endregion
#region Page methods
/// <summary>
/// Handles the Load event of the Page control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindTimePeriod();
}
}
#endregion
#region Private methods
/// <summary>
/// Sets the Tme and AmPm properties of the user control.
/// </summary>
/// <param name="time">The time.</param>
private void SetTime(string time)
{
if (!string.IsNullOrEmpty(time))
{
DateTime dateTime = Convert.ToDateTime(time);
string hour = dateTime.Hour.ToString();
string minute = dateTime.Minute.ToString();
if (Convert.ToInt32(hour) > TWELVE)
{
int timeHour = Convert.ToInt32(hour);
timeHour = timeHour - TWELVE;
if (timeHour == SERO)
{
timeHour = TWELVE;
}
hour = timeHour.ToString();
ddlAmPm.SelectedIndex = ONE;
}
else
{
ddlAmPm.SelectedIndex = SERO;
}
if (hour == ZERO)
{
hour = ZEROZERO;
}
if (hour.Length == ONE)
{
hour = ZERO + hour;
}
if (minute.Length == ONE)
{
minute = ZERO + minute;
}
txtTime.Text = hour + ":" + minute;
}
else
{
txtTime.Text = string.Empty;
}
}
/// <summary>
/// Binds the time period.
/// </summary>
private void BindTimePeriod()
{
this.ddlAmPm.DataSource = Utils.GetEnumTranslationsList(typeof(Constants.AmPm));
this.ddlAmPm.DataTextField = "Text";
this.ddlAmPm.DataValueField = "Value";
this.ddlAmPm.DataBind();
}
#endregion
}