[CLOSED] Problems Time typed on a TimeField control

  1. #1

    [CLOSED] Problems Time typed on a TimeField control

    Hello Commmunity!!

    How we can validate the time typed on a TimeField control when i have disabled the following properties

    
    ValidateOnChange="false" 
    ValidateOnBlur="false"
    I tried to put a mask to control, but it didn’t work

    I implemented the following example to illustrate my issue, I accept suggestions ideas or comments

    
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Edit Form View - Ext.NET Examples</title>
    
        <script type="text/javascript">
            var onKeyUp = function ()
            {
                var me = this,
                    v = me.getValue(),
                    field;
    
                if (me.startDateField)
                {
                    field = Ext.getCmp(me.startDateField);
                    field.setMaxValue(v);
                    me.dateRangeMax = v;
                }
                else if (me.endDateField)
                {
                    field = Ext.getCmp(me.endDateField);
                    field.setMinValue(v);
                    me.dateRangeMin = v;
                }
    
                field.validate();
            };
           Ext.define("Ext.Picker.TimeOverride", {
                override: "Ext.picker.Time",
                updateList: function () {
                    var me = this,
                        min = me.normalizeDate(me.minValue || me.absMin),
                        max = me.normalizeDate(me.maxValue || me.absMax);
    
                    if (min > max) {
                        me.rangeFilter.setFilterFn(function (record) {
                            var date = record.get('date');
                            return date >= min || date <= max;
                        });
                    } else {
                        me.rangeFilter.setFilterFn(function (record) {
                            var date = record.get('date');
                            return date >= min && date <= max;
                        });
                    }
                    me.store.filter();
                }
            });
        </script>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window ID="FormWindow" runat="server" 
                    Title="Form View" 
                    Width="440" 
                    Height="310"           
                    BodyPadding="15" 
                    Resizable="false" 
                    Closable="false"
                    Layout="Fit">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">                    
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Button1" Icon="Disk" Disabled="true">
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            Border="false" 
                            Layout="Form">
                        <Listeners>
                            <ValidityChange Handler="#{Button1}.setDisabled(!valid);" />
                        </Listeners>    
                        <Items>
                            <ext:FieldContainer ID="FieldContainer3" runat="server" 
                                    FieldLabel="Range 19.00 -> 07.00" 
                                    AnchorHorizontal="100%" 
                                    Layout="HBoxLayout">
                                <Items>
                                    <ext:TimeField ID="TimeFieldStart3" runat="server" 
                                            FieldLabel="Start 3" Editable="true" AllowBlank="false"
                                            LabelWidth="60"
                                            MinTime="19:00"
                                            MaxTime="07:00"
                                            LabelPad="2" Format="H:mm"
                                            Width="135" ValidateOnBlur="false" ValidateOnChange="false">
    <%--                                <Plugins>
                                        <ext:InputMask ID="InputMask1" runat="server" Mask="Hh:Mm">
                                            <MaskSymbols>
                                                <ext:MaskSymbol Name="H" Regex="[012]" Placeholder="h" />
                                                <ext:MaskSymbol Name="h" Regex="[0-9]" Placeholder="h" />
                                                <ext:MaskSymbol Name="M" Regex="[012]" Placeholder="m" />
                                                <ext:MaskSymbol Name="m" Regex="[0-9]" Placeholder="m" />
                                            </MaskSymbols>
                                        </ext:InputMask>
                                    </Plugins>--%>
                                    </ext:TimeField>
                                    <ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
                                    <ext:TimeField ID="TimeFieldEnd3" runat="server" 
                                            FieldLabel="End 3"  Editable="true" AllowBlank="false"
                                            LabelWidth="60"
                                            MinTime="19:00"
                                            MaxTime="07:00"
                                            LabelPad="2" Format="H:mm"
                                            Width="135" ValidateOnBlur="false" ValidateOnChange="false">
                                    </ext:TimeField>
                                </Items>
                            </ext:FieldContainer>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    http://forums.ext.net/showthread.php...nTime-MaxTime)

    I accept suggestions ideas or comments

    Regards.
    Last edited by Daniil; Oct 02, 2015 at 2:24 PM. Reason: [CLOSED]
  2. #2
    Hi @opendat2000,

    How we can validate the time typed on a TimeField control
    Please clarify what kind of validation would you like to apply? And in which moment?
  3. #3
    Hi Daniil,

    What I wanted to show is that typewritten value over the TimeField will be the right one, for example, if a text “abcd” or number “1234” is entered over the timefield, return a warning message or disable (for this example) “Button1” Button.

    Regards.
  4. #4
    Ok, the requirement appears to be quite clear for me.

    Though, the question first - is ValidateOnChange="false" setting absolutely required?
  5. #5
    Hi Daniil,

    Yes, it is required, to manage the decreased values properties MINTIME and MAXTIME, for example MINTIME = 20.00 and MAXTIME = 08.00.

    Please check the next link:

    http://forums.ext.net/showthread.php...nTime-MaxTime)

    Regards.
  6. #6
    Then I would recommend to try listening to a TimeField's Change event and validate.
    <ext:TimeField ...>
        <Listeners>
            <Change Handler="/* Validation Logic */" />
        </Listeners>
    </ext:TimeField>

Similar Threads

  1. Replies: 2
    Last Post: Jun 06, 2012, 6:18 PM
  2. Replies: 1
    Last Post: Jan 09, 2012, 10:55 AM
  3. Replies: 6
    Last Post: Jan 12, 2011, 2:37 PM
  4. [CLOSED] Problems with TimeField in GridPanel
    By Christof in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 05, 2010, 1:21 PM
  5. TimeField problem how to display the time
    By heysol in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2009, 8:52 PM

Posting Permissions