PDA

View Full Version : User control like timePicker



Quico
Sep 01, 2014, 8:54 PM
I wanted to make one like this:

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


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}.minV alue,#{Horas}.maxValue,#{hshowLeadingZero}.getValu e());" />
</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}.mi nValue,#{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}.minV alue,#{Horas}.maxValue,#{hshowLeadingZero}.getValu e());
#{pnlReloj}_minutosMinMax(#{Minutos},#{Minutos}.mi nValue,#{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,min ima, maximo)));
#{btn01}.setDisabled(!(#{pnlReloj}_betweenFn(1,min ima, maximo)));
#{btn02}.setDisabled(!(#{pnlReloj}_betweenFn(2,min ima, maximo)));
#{btn03}.setDisabled(!(#{pnlReloj}_betweenFn(3,min ima, maximo)));
#{btn04}.setDisabled(!(#{pnlReloj}_betweenFn(4,min ima, maximo)));
#{btn05}.setDisabled(!(#{pnlReloj}_betweenFn(5,min ima, maximo)));
#{btn06}.setDisabled(!(#{pnlReloj}_betweenFn(6,min ima, maximo)));
#{btn07}.setDisabled(!(#{pnlReloj}_betweenFn(7,min ima, maximo)));
#{btn08}.setDisabled(!(#{pnlReloj}_betweenFn(8,min ima, maximo)));
#{btn09}.setDisabled(!(#{pnlReloj}_betweenFn(9,min ima, maximo)));
#{btn10}.setDisabled(!(#{pnlReloj}_betweenFn(10,mi nima, maximo)));
#{btn11}.setDisabled(!(#{pnlReloj}_betweenFn(11,mi nima, maximo)));
#{btn12}.setDisabled(!(#{pnlReloj}_betweenFn(12,mi nima, maximo)));
#{btn13}.setDisabled(!(#{pnlReloj}_betweenFn(13,mi nima, maximo)));
#{btn14}.setDisabled(!(#{pnlReloj}_betweenFn(14,mi nima, maximo)));
#{btn15}.setDisabled(!(#{pnlReloj}_betweenFn(15,mi nima, maximo)));
#{btn16}.setDisabled(!(#{pnlReloj}_betweenFn(16,mi nima, maximo)));
#{btn17}.setDisabled(!(#{pnlReloj}_betweenFn(17,mi nima, maximo)));
#{btn18}.setDisabled(!(#{pnlReloj}_betweenFn(18,mi nima, maximo)));
#{btn19}.setDisabled(!(#{pnlReloj}_betweenFn(19,mi nima, maximo)));
#{btn20}.setDisabled(!(#{pnlReloj}_betweenFn(20,mi nima, maximo)));
#{btn21}.setDisabled(!(#{pnlReloj}_betweenFn(21,mi nima, maximo)));
#{btn22}.setDisabled(!(#{pnlReloj}_betweenFn(22,mi nima, maximo)));
#{btn23}.setDisabled(!(#{pnlReloj}_betweenFn(23,mi nima, 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.Tex t); }
set { this.hshowMinutesLeadingZero.Text = value.ToString(); }
}

public bool showSecondsLeadingZero
{
get { return Convert.ToBoolean(this.hshowSecondsLeadingZero.Tex t); }
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().R eplace("px", "")) + Convert.ToInt32(contenedorAMPM.Width.ToString().Re place("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.t imeSeparator) + 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.t imeSeparator) + 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.

Daniil
Sep 02, 2014, 12:08 PM
Hi @Quico,

Please clarify are you just sharing that or you need some assistance?

Quico
Sep 03, 2014, 11:41 AM
I just sharing. For someone to modify and share.

Thank you.

Daniil
Sep 03, 2014, 12:03 PM
Thank you!

Moving to the Examples and Extras forum.