User control like timePicker

  1. #1

    User control like timePicker

    I wanted to make one like this:

    https://fgelinas.com/code/timepicker/


    Click image for larger version. 

Name:	TimePicker.PNG 
Views:	44 
Size:	13.4 KB 
ID:	14931

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucTimePicker.ascx.cs" Inherits="SIRTIS.ControlUsuarios.ucTimePicker" %>
    
    <ext:Panel
        ID="Panel1"
        runat="server"
        Height="25" AnchorHorizontal="100%" Layout="AnchorLayout" > 
        <Items>
            <ext:Panel 
                ID="pnlReloj" 
                runat="server" 
                Border="false" 
                Header="false" 
                Layout="HBoxLayout" Height="25" >
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Middle" />
                </LayoutConfig>
                <Items>
                    <ext:TextField Hidden="true" runat="server" ID="hFormat" Text="HH:mm tt" />              <%--Format--%>
                    <ext:TextField Hidden="true" runat="server" ID="htimeFormat" Text="12" />                <%--timeFormat 12 o 24 hours--%>
                    <ext:TextField Hidden="true" runat="server" ID="hMinTime" Text="12:00 AM" />             <%--Set the minimum time selectable by the user--%>
                    <ext:TextField Hidden="true" runat="server" ID="hMaxTime" Text="11:59 PM" />             <%--Set the maxime time selectable by the user--%>
                    <ext:TextField Hidden="true" runat="server" ID="hSelectedTime" Text="" />                <%--Used as default time when input field is empty or for inline timePicker
                                                                                                                (set to 'now' for the current time, '' for no highlighted time,
                                                                                                                default value: now)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowHours" Text="true" />               <%--Define if the hours section is displayed or not. Set to false to get a minute only dialog--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowMinutes" Text="true" />             <%--Define if the minutes section is displayed or not. Set to false to get an hour only dialog--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowSeconds" Text="false" />             <%--Define if the seconds section is displayed or not. Set to false to get an hour only dialog--%>
    
                    <ext:TextField Hidden="true" runat="server" ID="htimeSeparator" Text=":" />              <%--The character to use to separate hours and minutes. (default: ':')--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowLeadingZero" Text="true" />         <%--Define whether or not to show a leading zero for hours < 10. (default: true)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowMinutesLeadingZero" Text="true" />  <%--Define whether or not to show a leading zero for minutes < 10. (default: true)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowSecondsLeadingZero" Text="true" />  <%--Define whether or not to show a leading zero for seconds < 10. (default: true)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowPeriod" Text="true" />              <%--Define whether or not to show AM/PM with selected time. (default: false)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowPeriodLabels" Text="true" />        <%--Define if the AM/PM labels on the left are displayed. (default: true)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hperiodSeparator" Text=" " />            <%--The character to use to separate the time from the time period.--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowOn" Text="focus" />                 <%--Define when the timepicker is shown.
                                                                                                                'focus': when the input gets focus, 'button' when the button trigger element is clicked,
                                                                                                                'both': when the input gets focus and when the button is clicked.--%>
    
                    <%-- Localization--%>
                    <ext:TextField Hidden="true" runat="server" ID="hhourText" Text="Horas" />               <%--Define the locale text for "Hours"--%>
                    <ext:TextField Hidden="true" runat="server" ID="hminuteText" Text="Minutos" />           <%--Define the locale text for "Minute"--%>
    
                    <%-- buttons--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowCloseButton" Text="true" />         <%--shows an OK button to confirm the edit--%>
                    <ext:TextField Hidden="true" runat="server" ID="hcloseButtonText" Text="Hecho" />        <%--Text for the confirmation button (ok button)--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowNowButton" Text="true" />           <%--Shows the 'now' button--%>
                    <ext:TextField Hidden="true" runat="server" ID="hnowButtonText" Text="Ahora" />          <%--Text for the now button--%>
                    <ext:TextField Hidden="true" runat="server" ID="hshowDeselectButton" Text="true" />      <%--Shows the deselect time button--%>
                    <ext:TextField Hidden="true" runat="server" ID="hdeselectButtonText" Text="Limpiar" />   <%--Text for the deselect button--%>
    
                    <ext:NumberField ID="clickDadoHora" runat="server" Hidden="true" />
                    <ext:NumberField ID="clickDadoMinuto" runat="server" Hidden="true" />
                    <ext:TextField runat="server" ID="Horas" MaskRe="[0-9]" Width="25" SelectOnFocus="true" Truncate="true" EnforceMaxLength="true"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                        AllowBlank="false" BlankText="La hora" MaxLength="2" MaxLengthText="2" MsgTarget="Qtip" Margins="0 0 0 0">
                        <Listeners>
                            <Blur Handler="#{pnlReloj}_horaValorMinMax(#{Horas},#{Horas}.minValue,#{Horas}.maxValue,#{hshowLeadingZero}.getValue());" />
                        </Listeners>
                        <CustomConfig>
                            <ext:ConfigItem Name="minValue" Value="01" />
                            <ext:ConfigItem Name="maxValue" Value="12" />
                        </CustomConfig>
                    </ext:TextField>
                    <ext:DisplayField ID="separadorHoras" runat="server" Text="<b>:</b>" Width="7" MarginSpec="0 0 0 0" EnforceMaxLength="true"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;" />
                    <ext:TextField runat="server" ID="Minutos" MaskRe="[0-9]" Width="25" SelectOnFocus="true"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                        AllowBlank="false" BlankText="Los minutos" MaxLength="2" MsgTarget="Qtip" Margins="0 0 0 0">
                        <Listeners>
                            <Blur Handler="#{pnlReloj}_minutosMinMax(#{Minutos},#{Minutos}.minValue,#{Minutos}.maxValue, #{Minutos}.minHoraValue,#{Minutos}.maxHoraValue,#{hshowMinutesLeadingZero}.getValue());" />
                        </Listeners>
                        <CustomConfig>
                            <ext:ConfigItem Name="minValue" Value="00" />
                            <ext:ConfigItem Name="maxValue" Value="59" />
                            <ext:ConfigItem Name="minHoraValue" Value="00" />
                            <ext:ConfigItem Name="maxHoraValue" Value="59" />
                        </CustomConfig>
                    </ext:TextField>
                    <ext:DisplayField ID="separadorMinutos" runat="server" Text="<b>:</b>" Width="7" MarginSpec="0 0 0 0" Hidden="true"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;" />
                    <ext:TextField runat="server" ID="Segundos" MaskRe="[0-9]" Width="25" SelectOnFocus="true" Hidden="true" EnforceMaxLength="true"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                        AllowBlank="false" BlankText="Los segundos" MaxLength="2" MsgTarget="Qtip" Margins="0 0 0 0" />
                    <ext:DisplayField ID="separadorAMPM" runat="server" Text=" " MarginSpec="0 0 0 0"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;" />
                    <ext:SelectBox ID="AMPM" runat="server" Width="30" QueryMode="Local" TypeAhead="true" HideTrigger="true" MaxLength="2" EnforceMaxLength="true"
                        FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                        MarginSpec="0 0 0 0">
                        <Items>
                            <ext:ListItem Text="PM" Value="PM" />
                            <ext:ListItem Text="AM" Value="AM" />
                        </Items>
                        <SelectedItems>
                            <ext:ListItem Value="AM" />
                        </SelectedItems>
                        <Listeners>
                            <Select Handler="#{pnlReloj}_rectificarMinMax();" />
                        </Listeners>
                    </ext:SelectBox>
                    <ext:DisplayField runat="server" Flex="1" />
                    <ext:Button ID="Button1" runat="server" Width="20" Height="25">
                        <Menu>
                            <ext:Menu ID="MenuReloj" runat="server" EnableKeyNav="false" ShowSeparator="false" Plain="true" RenderToForm="true" AutoWidth="true"
                                BodyStyle="background-color: #A0522D !important; color: #000000 !important;" HeaderPosition="Left">
                                <Items>
                                    <ext:Container ID="contenedorDisplay" runat="server" Layout="HBoxLayout" Width="290">
                                        <Items>
                                            <ext:Button ID="btnDisplayHora" runat="server" Text="Horas" Height="25" Width="198" UI="Primary" />
                                            <ext:Button ID="btnDisplayMinutos" runat="server" Text="Minutos" Height="25" Width="85" MarginSpec="0 0 0 5" UI="Info" />
                                        </Items>
                                    </ext:Container>
                                    <ext:Container ID="contenedorHoraMinutos" runat="server" Layout="HBoxLayout" Width="290">
                                        <Items>
                                            <ext:Container ID="contenedorAMPM" runat="server" Layout="VBoxLayout" Width="20">
                                                <Items>
                                                    <ext:DisplayField ID="DisplayField3" runat="server" Text="AM" MarginSpec="10 0 0 0" BodyStyle="color: #000000 !important;" />
                                                    <ext:DisplayField ID="DisplayField4" runat="server" Text="PM" MarginSpec="20 0 0 0" BodyStyle="color: #000000 !important;" />
                                                    <ext:TextField ID="ToggleHora" runat="server" Hidden="true" />
                                                    <ext:TextField ID="ToggleMinuto" runat="server" Hidden="true" />
                                                </Items>
                                            </ext:Container>
                                            <ext:Container ID="contenedorHoras" runat="server" Layout="ColumnLayout" Width="180">
                                                <Items>
                                                    <ext:Button ID="btn00" runat="server" Text="<b>00</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('00'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>12</b>" />
                                                    <ext:Button ID="btn01" runat="server" Text="<b>01</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('01'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn02" runat="server" Text="<b>02</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('02'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn03" runat="server" Text="<b>03</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('03'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn04" runat="server" Text="<b>04</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('04'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn05" runat="server" Text="<b>05</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('05'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn06" runat="server" Text="<b>06</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('06'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn07" runat="server" Text="<b>07</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('07'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn08" runat="server" Text="<b>08</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('08'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn09" runat="server" Text="<b>09</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('09'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn10" runat="server" Text="<b>10</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('10'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn11" runat="server" Text="<b>11</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('11'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn12" runat="server" Text="<b>12</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('12'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btn13" runat="server" Text="<b>13</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('13'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>1</b>" />
                                                    <ext:Button ID="btn14" runat="server" Text="<b>14</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('14'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>2</b>" />
                                                    <ext:Button ID="btn15" runat="server" Text="<b>15</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('15'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>3</b>" />
                                                    <ext:Button ID="btn16" runat="server" Text="<b>16</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('16'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>4</b>" />
                                                    <ext:Button ID="btn17" runat="server" Text="<b>17</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('17'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>5</b>" />
                                                    <ext:Button ID="btn18" runat="server" Text="<b>18</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('18'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>6</b>" />
                                                    <ext:Button ID="btn19" runat="server" Text="<b>19</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('19'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>7</b>" />
                                                    <ext:Button ID="btn20" runat="server" Text="<b>20</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('20'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>8</b>" />
                                                    <ext:Button ID="btn21" runat="server" Text="<b>21</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('21'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>9</b>" />
                                                    <ext:Button ID="btn22" runat="server" Text="<b>22</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('22'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>10</b>" />
                                                    <ext:Button ID="btn23" runat="server" Text="<b>23</b>" EnableToggle="true" ToggleGroup="Group1" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleHora}.setValue('23'); #{clickDadoHora}.setValue(1); #{pnlReloj}_selectTime();" ToolTip="Es la <b>11</b>" />
                                                </Items>
                                            </ext:Container>
                                            <ext:DisplayField runat="server" MarginSpec="0 5 0 0" />
                                            <ext:Container ID="contenedorMinutos" runat="server" Layout="ColumnLayout" Width="100">
                                                <Items>
                                                    <ext:Button ID="btnM00" runat="server" Text="<b>00</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('00'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM05" runat="server" Text="<b>05</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('05'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM10" runat="server" Text="<b>10</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('10'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM15" runat="server" Text="<b>15</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('15'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM20" runat="server" Text="<b>20</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('20'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM25" runat="server" Text="<b>25</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('25'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM30" runat="server" Text="<b>30</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('30'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM35" runat="server" Text="<b>35</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('35'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM40" runat="server" Text="<b>40</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('40'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM45" runat="server" Text="<b>45</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('45'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM50" runat="server" Text="<b>50</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('50'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                    <ext:Button ID="btnM55" runat="server" Text="<b>55</b>" EnableToggle="true" ToggleGroup="Group2" MarginSpec="3 3 0 0" Width="27" Handler="#{ToggleMinuto}.setValue('55'); #{clickDadoMinuto}.setValue(1); #{pnlReloj}_selectTime();" />
                                                </Items>
                                            </ext:Container>
                                        </Items>
                                    </ext:Container>
                                    <ext:Toolbar ID="ToolbarBotones" runat="server" Height="25" Border="true" Flex="1" MarginSpec="5 0 0 0">
                                        <Items>
                                            <ext:Button ID="btnNow" runat="server" Text="<b>Ahora</b>">
                                                <DirectEvents>
                                                    <Click OnEvent="setNow" />
                                                </DirectEvents>
                                            </ext:Button>
                                            <ext:Button ID="btnClear" runat="server" Text="Limpiar"
                                                Handler="#{clickDadoHora}.setValue(0); #{clickDadoMinuto}.setValue(0); #{Horas}.reset(); #{Minutos}.reset(); #{Segundos}.reset(); #{pnlReloj}_deselectTime();" />
                                            <ext:ToolbarFill />
                                            <ext:Button ID="btnDone" runat="server" Text="Hecho" Handler="#{MenuReloj}.hide();" />
                                        </Items>
                                    </ext:Toolbar>
                                </Items>
                                <Listeners>
                                    <BeforeShow Handler="#{clickDadoHora}.setValue(0); #{clickDadoMinuto}.setValue(0); #{pnlReloj}_selectHourMinute();" />
                                </Listeners>
                            </ext:Menu>
                        </Menu>
                    </ext:Button>
                </Items>
            </ext:Panel>
        </Items>
        <HtmlBin>
            <ext:XScript ID="XScript1" runat="server">
                <script type="text/javascript">
                    #{pnlReloj}_selectTime = function (){
                        var hour = #{ToggleHora}.getValue();
                        var minute = #{ToggleMinuto}.getValue();            
                
                        var datoHour = Ext.util.Format.number(hour, '0') * 1;
                        var datoMinute = Ext.util.Format.number(minute, '0') * 1;
                        
                        if(#{htimeFormat}.getValue() == "12")
                        {
                            #{AMPM}.setValue("AM");
                            if(datoHour > 11)
                            {
                                #{AMPM}.setValue("PM");
                            }                
    
                            if(datoHour > 12)
                            {
                                datoHour -= 12;
                            }
    
                            if(datoHour == 0)
                            {
                                datoHour = 12;
                            }
                        }
                        
                        if(#{hshowLeadingZero}.getValue() == "true")
                        {
                            #{Horas}.setValue(Ext.String.leftPad(datoHour,2,'0'));
                        }
                        else
                        {
                            #{Horas}.setValue(datoHour.toString());
                        }
    
                        if(minute != "")
                        {
                            if(#{hshowMinutesLeadingZero}.getValue() == "true")
                            {
                                #{Minutos}.setValue(Ext.String.leftPad(datoMinute,2,'0'));
                            }
                            else 
                            {
                                #{Minutos}.setValue(datoMinute.toString());
                            }
                        }
    
                        var permitirClickDado = 1;
                        if(#{hshowHours}.getValue() == "true" && #{hshowMinutes}.getValue() == "true")
                        {
                            permitirClickDado = 2;
                        }
    
                        if((#{clickDadoHora}.getValue() + #{clickDadoMinuto}.getValue()) == permitirClickDado)
                        {
                            #{MenuReloj}.hide();
                        }
    
                        #{pnlReloj}_rectificarMinMax();
                    };
            
                    #{pnlReloj}_rectificarMinMax = function(){
                        #{pnlReloj}_horaValorMinMax(#{Horas},#{Horas}.minValue,#{Horas}.maxValue,#{hshowLeadingZero}.getValue());
                        #{pnlReloj}_minutosMinMax(#{Minutos},#{Minutos}.minValue,#{Minutos}.maxValue, #{Minutos}.minHoraValue,#{Minutos}.maxHoraValue,#{hshowMinutesLeadingZero}.getValue());
                    };
    
                    #{pnlReloj}_horaValorMinMax = function(field, min, max, isLeadingZero){
                        var value = Ext.util.Format.number(field.getValue(), '0') * 1;
                        var minimo = Ext.util.Format.number(min, '0') * 1;
                        var maximo = Ext.util.Format.number(max, '0') * 1;        
                        
                        if(minimo == 12 && #{hMinTime}.getValue().toUpperCase().indexOf("AM") != -1)
                            minimo = 0;
    
                        var timeformat = #{htimeFormat}.getValue();
    
                        if(value < minimo && (timeformat != "12" ? true : (#{AMPM}.getValue() == "AM" ? true : false)))
                        {
                            value = minimo;
                        }
                        else if(value > maximo && (timeformat != "12" ? true : (#{AMPM}.getValue() == "PM" ? true : false)))
                        {
                            value = maximo;
                        }
                            
                        if(isLeadingZero == "true")
                        {
                            field.setValue(Ext.String.leftPad(value,2,'0'));
                        }
                        else
                        {
                            field.setValue(value.toString());                
                        }
                    };
    
                    #{pnlReloj}_minutosMinMax = function(field, min, max, minHora, maxHora, isLeadingZero){
                        var value = Ext.util.Format.number(field.getValue(), '0');
                        var minimo = Ext.util.Format.number(min, '0');
                        var maximo = Ext.util.Format.number(max, '0');
                            
                        if(value < minimo)
                        {
                            value = minimo;
                        }
                        else if(value > maximo)
                        {
                            value = maximo;
                        }
                
                        //Para buscar los minutos m?ximo  
                        var horasMaximaValor = Ext.util.Format.number(#{Horas}.maxValue, '0') * 1;
                        var horasMinimoValor = Ext.util.Format.number(#{Horas}.minValue, '0') * 1;
                        var horaDato = Ext.util.Format.number(#{Horas}.getValue(), '0') * 1; 
                
                        var timeformat = #{htimeFormat}.getValue();            
                        //Buscando hora y minutos m?ximos
                        if(timeformat != "12" ? true : (#{AMPM}.getValue() == "PM" ? true : false)){
                            if( horasMaximaValor == horaDato)
                            {            
                                maximo = Ext.util.Format.number(maxHora, '0') * 1;                     
                                if(value > maximo)
                                {
                                    value = maximo;
                                }
                            }
                            #{pnlReloj}_disableMinuto(maximo,false);
                        }                    
                        else if(timeformat != "12" ? true : (#{AMPM}.getValue() == "AM" ? true : false)){
                            //Buscando hora y minutos m?nimos
                            if(horasMinimoValor == horaDato )
                            {   
                                minimo = Ext.util.Format.number(minHora, '0') * 1;               
                                if(value < minimo)
                                {
                                    value = minimo;
                                }
                       
                            }
                            #{pnlReloj}_disableMinuto(minimo,true);                
                        }
                          
    
                        if(isLeadingZero == "true")
                        {
                            field.setValue(Ext.String.leftPad(value,2,'0'));
                        }
                        else
                        {
                            field.setValue(value.toString());                
                        }            
                    };
    
                    #{pnlReloj}_disableHora = function(max, min){
                        var maximo = Ext.util.Format.number(max, '0') * 1;
                        var minima = Ext.util.Format.number(min, '0') * 1;            
    
                        #{btn00}.setDisabled(!(#{pnlReloj}_betweenFn(0,minima, maximo)));
                        #{btn01}.setDisabled(!(#{pnlReloj}_betweenFn(1,minima, maximo)));
                        #{btn02}.setDisabled(!(#{pnlReloj}_betweenFn(2,minima, maximo)));
                        #{btn03}.setDisabled(!(#{pnlReloj}_betweenFn(3,minima, maximo)));
                        #{btn04}.setDisabled(!(#{pnlReloj}_betweenFn(4,minima, maximo)));
                        #{btn05}.setDisabled(!(#{pnlReloj}_betweenFn(5,minima, maximo)));
                        #{btn06}.setDisabled(!(#{pnlReloj}_betweenFn(6,minima, maximo)));
                        #{btn07}.setDisabled(!(#{pnlReloj}_betweenFn(7,minima, maximo)));
                        #{btn08}.setDisabled(!(#{pnlReloj}_betweenFn(8,minima, maximo)));
                        #{btn09}.setDisabled(!(#{pnlReloj}_betweenFn(9,minima, maximo)));
                        #{btn10}.setDisabled(!(#{pnlReloj}_betweenFn(10,minima, maximo)));
                        #{btn11}.setDisabled(!(#{pnlReloj}_betweenFn(11,minima, maximo)));
                        #{btn12}.setDisabled(!(#{pnlReloj}_betweenFn(12,minima, maximo)));
                        #{btn13}.setDisabled(!(#{pnlReloj}_betweenFn(13,minima, maximo)));
                        #{btn14}.setDisabled(!(#{pnlReloj}_betweenFn(14,minima, maximo)));
                        #{btn15}.setDisabled(!(#{pnlReloj}_betweenFn(15,minima, maximo)));
                        #{btn16}.setDisabled(!(#{pnlReloj}_betweenFn(16,minima, maximo)));
                        #{btn17}.setDisabled(!(#{pnlReloj}_betweenFn(17,minima, maximo)));
                        #{btn18}.setDisabled(!(#{pnlReloj}_betweenFn(18,minima, maximo)));
                        #{btn19}.setDisabled(!(#{pnlReloj}_betweenFn(19,minima, maximo)));
                        #{btn20}.setDisabled(!(#{pnlReloj}_betweenFn(20,minima, maximo)));
                        #{btn21}.setDisabled(!(#{pnlReloj}_betweenFn(21,minima, maximo)));
                        #{btn22}.setDisabled(!(#{pnlReloj}_betweenFn(22,minima, maximo)));
                        #{btn23}.setDisabled(!(#{pnlReloj}_betweenFn(23,minima, maximo)));
                    };
    
                    #{pnlReloj}_disableMinuto = function(min,EsAM){
                        var minute = Ext.util.Format.number(min, '0') * 1;
                        //alert(min);
                        #{btnM00}.setDisabled(!((!EsAM ? (minute > -1) : (minute < 5)) ? true : false));            
                        #{btnM05}.setDisabled(!((!EsAM ? (minute > 4) : (minute < 10)) ? true : false));
                        #{btnM10}.setDisabled(!((!EsAM ? (minute > 9) : (minute < 15)) ? true : false));
                        #{btnM15}.setDisabled(!((!EsAM ? (minute > 14) : (minute < 20)) ? true : false));
                        #{btnM20}.setDisabled(!((!EsAM ? (minute > 19) : (minute < 25)) ? true : false));
                        #{btnM25}.setDisabled(!((!EsAM ? (minute > 24) : (minute < 30)) ? true : false));
                        #{btnM30}.setDisabled(!((!EsAM ? (minute > 29) : (minute < 35)) ? true : false));
                        #{btnM35}.setDisabled(!((!EsAM ? (minute > 34) : (minute < 40)) ? true : false));
                        #{btnM40}.setDisabled(!((!EsAM ? (minute > 39) : (minute < 45)) ? true : false));
                        #{btnM45}.setDisabled(!((!EsAM ? (minute > 44) : (minute < 50)) ? true : false));
                        #{btnM50}.setDisabled(!((!EsAM ? (minute > 49) : (minute < 55)) ? true : false));
                        #{btnM55}.setDisabled(!((!EsAM ? (minute > 54) : (minute < 60)) ? true : false));
                    };
    
                    #{pnlReloj}_betweenFn = function(number, from, to){
                        if (number >= from && number <= to) 
                            return true;
                        else
                            return false;
                    };
    
                    #{pnlReloj}_deselectTime = function(timeHora,timeMinutos){
                        var time = -1;
                        if(timeHora != null){
                            #{ToggleHora}.setValue(timeHora);
                            time = Ext.util.Format.number(timeHora, '0');
                        }else
                            #{ToggleHora}.setValue("");
    
                        var minute = -1;
                        if(timeMinutos != null)
                            minute = Ext.util.Format.number(timeMinutos, '0');
    
                        //Para deshabilitar los botones de horas
                        var hora = #{Horas}.maxValue;
                        if(#{htimeFormat}.getValue() == "12"){
                            var hr = Ext.util.Format.number(hora, '0') * 1;
                            if(#{hMaxTime}.getValue().indexOf('PM') > -1){
                                hr = hr + 12;
                            }
                            else if(hr == 12){
                                hr = 0;
                            }
                            hora = hr;
                        }            
                        var horaMax = hora;
    
                        var horaMin = #{Horas}.minValue;
                        if(#{htimeFormat}.getValue() == "12"){
                            var hrM = Ext.util.Format.number(horaMin, '0') * 1;
                            if(#{hMinTime}.getValue().indexOf('PM') > -1){
                                hrM = hrM + 12;
                            }
                            else if(hrM == 12){
                                hrM = 0;
                            }
    
                            horaMin = hrM;
                        }
                        #{pnlReloj}_disableHora(horaMax,horaMin);
                        //Fin deshabilitar
    
                        #{btn00}.toggle((time == 0 ? true : false));
                        #{btn01}.toggle((time == 1 ? true : false));
                        #{btn02}.toggle((time == 2 ? true : false));
                        #{btn03}.toggle((time == 3 ? true : false));
                        #{btn04}.toggle((time == 4 ? true : false));
                        #{btn05}.toggle((time == 5 ? true : false));
                        #{btn06}.toggle((time == 6 ? true : false));
                        #{btn07}.toggle((time == 7 ? true : false));
                        #{btn08}.toggle((time == 8 ? true : false));
                        #{btn09}.toggle((time == 9 ? true : false));
                        #{btn10}.toggle((time == 10 ? true : false));
                        #{btn11}.toggle((time == 11 ? true : false));
                        #{btn12}.toggle((time == 12 ? true : false));
                        #{btn13}.toggle((time == 13 ? true : false));
                        #{btn14}.toggle((time == 14 ? true : false));
                        #{btn15}.toggle((time == 15 ? true : false));
                        #{btn16}.toggle((time == 16 ? true : false));
                        #{btn17}.toggle((time == 17 ? true : false));
                        #{btn18}.toggle((time == 18 ? true : false));
                        #{btn19}.toggle((time == 19 ? true : false));
                        #{btn20}.toggle((time == 20 ? true : false));
                        #{btn21}.toggle((time == 21 ? true : false));
                        #{btn22}.toggle((time == 22 ? true : false));
                        #{btn23}.toggle((time == 23 ? true : false));
    
                        #{btnM00}.toggle((minute >= 0 && minute < 5 ? true : false));
                        if(minute >= 0 && minute < 5 )
                            #{ToggleMinuto}.setValue("00");
                        #{btnM05}.toggle((minute >= 5 && minute < 10 ? true : false));
                        if(minute >= 5 && minute < 10)
                            #{ToggleMinuto}.setValue("05");
                        #{btnM10}.toggle((minute >= 10 && minute < 15 ? true : false));
                        if(minute >= 10 && minute < 15 )
                            #{ToggleMinuto}.setValue("10");
                        #{btnM15}.toggle((minute >= 15 && minute < 20 ? true : false));
                        if(minute >= 15 && minute < 20 )
                            #{ToggleMinuto}.setValue("15");
                        #{btnM20}.toggle((minute >= 20 && minute < 25 ? true : false));
                        if(minute >= 20 && minute < 25)
                            #{ToggleMinuto}.setValue("20");
                        #{btnM25}.toggle((minute >= 25 && minute < 30 ? true : false));
                        if(minute >= 25 && minute < 30 )
                            #{ToggleMinuto}.setValue("25");
                        #{btnM30}.toggle((minute >= 30 && minute < 35 ? true : false));
                        if(minute >= 30 && minute < 35 )
                            #{ToggleMinuto}.setValue("30");
                        #{btnM35}.toggle((minute >= 35 && minute < 40 ? true : false));
                        if(minute >= 35 && minute < 40)
                            #{ToggleMinuto}.setValue("35");
                        #{btnM40}.toggle((minute >= 40 && minute < 45 ? true : false));
                        if(minute >= 40 && minute < 45)
                            #{ToggleMinuto}.setValue("40");
                        #{btnM45}.toggle((minute >= 45 && minute < 50 ? true : false));
                        if(minute >= 45 && minute < 50 )
                            #{ToggleMinuto}.setValue("45");
                        #{btnM50}.toggle((minute >= 50 && minute < 55 ? true : false));
                        if(minute >= 50 && minute < 55)
                            #{ToggleMinuto}.setValue("50");
                        #{btnM55}.toggle((minute >= 55 && minute < 60 ? true : false));            
                        if(minute >= 55 && minute < 60)
                            #{ToggleMinuto}.setValue("55");
                    };
    
                    #{pnlReloj}_selectHourMinute = function(){            
            
                        var hour = #{Horas}.getValue();
                        var minute = #{Minutos}.getValue();
    
                        if(hour == null || hour == "")
                            hour = "-1";
    
                        if(minute == null || minute == "")
                            minute = "-1";
    
                        if(#{htimeFormat}.getValue() == "12"){
                            if(#{AMPM}.getValue() == "PM"){
                                var h = Ext.util.Format.number(hour, '0') * 1;
                                h = h + 12;
                                hour = Ext.String.leftPad(h,2,'0')
                            }
                        }
                
                        #{pnlReloj}_deselectTime(hour,minute);
                            
                    };
                </script>
            </ext:XScript>
        </HtmlBin>
    </ext:Panel>
    Code behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    namespace SIRTIS.ControlUsuarios
    {
        public partial class ucTimePicker : System.Web.UI.UserControl
        {
            public string Format
            {
                get { return this.hFormat.Text; }
                set { this.hFormat.Text = value; }
            }
    
            public Int32 timeFormat
            {
                get { return Convert.ToInt32(this.htimeFormat.Text); }
                set
                {
                    if (value != 12 && value != 24)
                        this.htimeFormat.Text = "12";
                    else
                        this.htimeFormat.Text = value.ToString();
                }
            }
    
            public string MinTime
            {
                get { return this.hMinTime.Text; }
                set { this.hMinTime.Text = value; }
            }
    
            public string MaxTime
            {
                get { return this.hMaxTime.Text; }
                set { this.hMaxTime.Text = value; }
            }
    
            public string SelectedTime
            {
                get { return this.hSelectedTime.Text; }
                set { this.hSelectedTime.Text = value; }
            }
    
            public bool showHours
            {
                get { return Convert.ToBoolean(this.hshowHours.Text); }
                set { this.hshowHours.Text = value.ToString(); }
            }
    
            public bool showMinutes
            {
                get { return Convert.ToBoolean(this.hshowMinutes.Text); }
                set { this.hshowMinutes.Text = value.ToString(); }
            }
    
            public bool showSeconds
            {
                get { return Convert.ToBoolean(this.hshowSeconds.Text); }
                set { this.hshowSeconds.Text = value.ToString(); }
            }
    
            public string timeSeparator
            {
                get { return this.htimeSeparator.Text; }
                set { this.htimeSeparator.Text = value; }
            }
    
            public bool showLeadingZero
            {
                get { return Convert.ToBoolean(this.hshowLeadingZero.Text); }
                set { this.hshowLeadingZero.Text = value.ToString(); }
            }
    
            public bool showMinutesLeadingZero
            {
                get { return Convert.ToBoolean(this.hshowMinutesLeadingZero.Text); }
                set { this.hshowMinutesLeadingZero.Text = value.ToString(); }
            }
    
            public bool showSecondsLeadingZero
            {
                get { return Convert.ToBoolean(this.hshowSecondsLeadingZero.Text); }
                set { this.hshowSecondsLeadingZero.Text = value.ToString(); }
            }
    
            public bool showPeriod
            {
                get { return Convert.ToBoolean(this.hshowPeriod.Text); }
                set { this.hshowPeriod.Text = value.ToString(); }
            }
    
            public bool showPeriodLabels
            {
                get { return Convert.ToBoolean(this.hshowPeriodLabels.Text); }
                set { this.hshowPeriodLabels.Text = value.ToString(); }
            }
    
            public string periodSeparator
            {
                get { return this.hperiodSeparator.Text; }
                set { this.hperiodSeparator.Text = value; }
            }
    
            public string showOn
            {
                get { return this.hshowOn.Text; }
                set { this.hshowOn.Text = value; }
            }
    
            public string hourText
            {
                get { return this.hhourText.Text; }
                set { this.hhourText.Text = value; }
            }
    
            public string minuteText
            {
                get { return this.hminuteText.Text; }
                set { this.hminuteText.Text = value; }
            }
    
            public bool showCloseButton
            {
                get { return Convert.ToBoolean(this.hshowCloseButton.Text); }
                set { this.hshowCloseButton.Text = value.ToString(); }
            }
    
            public string closeButtonText
            {
                get { return this.hcloseButtonText.Text; }
                set { this.hcloseButtonText.Text = value; }
            }
    
            public bool showNowButton
            {
                get { return Convert.ToBoolean(this.hshowNowButton.Text); }
                set { this.hshowNowButton.Text = value.ToString(); }
            }
    
            public string nowButtonText
            {
                get { return this.hnowButtonText.Text; }
                set { this.hnowButtonText.Text = value; }
            }
    
            public bool showDeselectButton
            {
                get { return Convert.ToBoolean(this.hshowDeselectButton.Text); }
                set { this.hshowDeselectButton.Text = value.ToString(); }
            }
    
            public string deselectButtonText
            {
                get { return this.hdeselectButtonText.Text; }
                set { this.hdeselectButtonText.Text = value; }
            }
            
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            private void Page_Init(object sender, EventArgs e)
            {
                btnDisplayHora.Text = hourText;
                btnDisplayMinutos.Text = minuteText;
    
                btnDone.Text = closeButtonText;
                btnNow.Text = nowButtonText;
                btnClear.Text = deselectButtonText;
    
                string minMax;
                if (Format.ToUpper().IndexOf("T") != -1)
                {
                    minMax = MinTime.Substring(0, MinTime.IndexOf(this.timeSeparator));
                    Horas.Set("minValue", minMax);
                    minMax = MaxTime.Substring(0, MaxTime.IndexOf(this.timeSeparator));
                    Horas.Set("maxValue", minMax);
                }
    
                if (Format.ToUpper().IndexOf("M") != -1)
                {
                    int startPosition = Format.ToUpper().IndexOf("M");
                    minMax = MinTime.Substring(startPosition, 2);
                    Minutos.Set("minHoraValue", minMax);
                    minMax = MaxTime.Substring(startPosition, 2);
                    Minutos.Set("maxHoraValue", minMax);
                }
    
                if (!showPeriodLabels)
                {
                    AMPM.Hide();
                    separadorAMPM.Hide();
                }
                else
                    separadorAMPM.Text = periodSeparator;
    
                if (!showPeriod)
                {
                    separadorHoras.Hide();
                    separadorMinutos.Hide();
                }
                else
                {
                    separadorHoras.Text = timeSeparator;
                    separadorMinutos.Text = timeSeparator;
                }
    
    
                if (!showCloseButton && !showNowButton && !showDeselectButton)
                {
                    ToolbarBotones.Hide();
                    btnNow.Hide();
                    btnClear.Hide();
                    btnDone.Hide();
                }
                else
                {
                    if (!showCloseButton)
                        btnDone.Hide();
                    if (!showNowButton)
                        btnNow.Hide();
                    if (!showDeselectButton)
                        btnClear.Hide();
                }
    
                if (!showSeconds)
                {
                    separadorMinutos.Hide();
                    Segundos.Hide();
                }
                else
                {
                    separadorMinutos.Show();
                    Segundos.Show();
                }
    
                if (!showHours)
                {
                    Horas.Hide();
                    separadorHoras.Hide();
                    btnDisplayHora.Hide();
                    separadorAMPM.Hide();
                    AMPM.Hide();
                    contenedorAMPM.Hide();
                    contenedorHoras.Hide();
    
                    if (showMinutes)
                    {
                        int reducir = Convert.ToInt32(contenedorMinutos.Width.ToString().Replace("px", ""));
                        contenedorDisplay.Width = reducir;
                        contenedorHoraMinutos.Width = reducir;
                    }
                }
    
                if (!showMinutes)
                {
                    Minutos.Hide();
                    separadorMinutos.Hide();
                    Segundos.Hide();
                    btnDisplayMinutos.Hide();
                    contenedorMinutos.Hide();
    
                    if (showHours)
                    {
                        int reducir = Convert.ToInt32(contenedorHoras.Width.ToString().Replace("px", "")) + Convert.ToInt32(contenedorAMPM.Width.ToString().Replace("px", ""));
                        contenedorDisplay.Width = reducir;
                        contenedorHoraMinutos.Width = reducir;
                    }
                }
    
                if (SelectedTime != "")
                    SetValue(SelectedTime);
    
            }
    
            protected void setNow(object sender, DirectEventArgs e)
            {
                MenuReloj.Hide();
                SetValue(DateTime.Now);
            }
    
            [DirectMethod]
            public void SetValue(string hora)
            {
    
                TimeSpan separar = StringToTimeSpan(hora);
                setTime(separar);
            }
    
            [DirectMethod]
            public void SetValue(DateTime hora)
            {
                TimeSpan separar = hora.TimeOfDay;
                setTime(separar);
            }
    
            [DirectMethod]
            public string GetValue()
            {
                string hora = "";
                if (showHours)
                {
                    hora = Horas.Text;
                }
                if (showMinutes)
                {
                    hora += hora == "" ? Minutos.Text : timeSeparator + Minutos.Text;
                }
    
                if (showSeconds)
                {
                    hora += hora == "" ? Segundos.Text : timeSeparator + Minutos.Text;
                }
    
                if (timeFormat == 12)
                {
                    hora += hora == "" ? AMPM.Text : periodSeparator + AMPM.Text;
                }
    
                return hora;
            }
    
            private void setTime(TimeSpan time)
            {
                int hora;
                int minutos = time.Minutes;
                int segundos = time.Seconds;
                if (timeFormat == 12)
                {
                    hora = time.Hours > 12 ? time.Hours - 12 : time.Hours;
                    AMPM.Value = time.Hours > 11 ? "PM" : "AM";
                }
                else
                {
                    hora = time.Hours;
                }
    
                if (showHours)
                    Horas.Text = showLeadingZero ? hora.ToString().PadLeft(2, '0') : hora.ToString();
    
                if (showMinutes)
                    Minutos.Text = showMinutesLeadingZero ? minutos.ToString().PadLeft(2, '0') : minutos.ToString();
    
                if (showSeconds)
                    Segundos.Text = showSecondsLeadingZero ? segundos.ToString().PadLeft(2, '0') : segundos.ToString();
    
            }
    
            public TimeSpan StringToTimeSpan(string hora)
            {
                if(hora.ToString() == "")
                    return new TimeSpan(0, 0, 0);
    
                int HoraReloj = Convert.ToInt32(hora.Substring(0, hora.IndexOf(this.timeSeparator)));
                int MinuReloj = Convert.ToInt32(hora.Substring(hora.IndexOf(this.timeSeparator) + 1, 2));
    
                if (hora.ToUpper().IndexOf("PM") != -1)
                {
                    if (HoraReloj != 12)
                        HoraReloj += 12;
                }
                else
                    if (HoraReloj == 12)
                        HoraReloj = 24;
    
                int SeguReloj = 0;
                if (this.showSeconds)
                {
                    SeguReloj = Convert.ToInt32(hora.Substring(hora.IndexOf(this.timeSeparator) + 4, 2));
                }
    
    
                return new TimeSpan(HoraReloj, MinuReloj, SeguReloj);
            }
        }
    }

    Using it:

    <ext:FormPanel 
                        ID="InfoTabPrincipal" 
                        runat="server" 
                        Title="Detalle" 
                        Icon="ChartOrganisation"
                        Width="500"
                        BodyPadding="5"
                        Frame="true">
             <Items>
                 <ext:FieldContainer ID="ctHoraCreacion" runat="server" Height="25" Width="230" Layout="FitLayout" FieldLabel="<b>Hora</b>" CombineErrors="false" Border="true" > <%--AnchorHorizontal="100%" AnchorVertical="100%" --%>                                                
                    <Content>
                        <uc2:ucTimePicker runat="server" ID="ucTimePicker1" SelectedTime="09:30 PM" MinTime="07:30 AM" MaxTime="06:30 PM" />
                    </Content>
                </ext:FieldContainer>
            </Items>
        </ext:FormPanel>
    I hope that helps.
  2. #2
    Hi @Quico,

    Please clarify are you just sharing that or you need some assistance?
  3. #3
    I just sharing. For someone to modify and share.

    Thank you.
  4. #4
    Thank you!

    Moving to the Examples and Extras forum.

Similar Threads

  1. Replies: 2
    Last Post: May 09, 2013, 3:41 PM
  2. Timepicker - error?
    By sm108 in forum 2.x Help
    Replies: 2
    Last Post: Nov 16, 2012, 6:37 PM
  3. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  4. how to upload user control dynamicaly on user control
    By archana mahadule in forum 1.x Help
    Replies: 1
    Last Post: Jan 13, 2011, 12:05 PM
  5. TimePicker
    By wdjlover in forum 1.x Help
    Replies: 2
    Last Post: Apr 29, 2009, 6:35 AM

Posting Permissions