Wednesday, May 30, 2012

Javascript for a timer textbox

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.

 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
    }

No comments:

Post a Comment