[CLOSED] Apply range 19.00 -> 07.00 to control TimeField (MinTime, MaxTime)

  1. #1

    [CLOSED] Apply range 19.00 -> 07.00 to control TimeField (MinTime, MaxTime)

    Hi Community!

    I wanna know if it’s possible to manage/validate next interval ”19.00 -> 07.00”, additionally I need to know how to applicate KeyUp function.

    I implemented the following example to illustrate my problem

    
    <%@ 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">
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            Border="false" 
                            Layout="Form">
                        <Items>
                            <ext:FieldContainer ID="FieldContainer1" runat="server" 
                                    FieldLabel="Range 08.30 -> 18.30" 
                                    AnchorHorizontal="100%" 
                                    Layout="HBoxLayout">
                                <Items>
                                    <ext:TimeField ID="TimeFieldStart1" runat="server" 
                                            FieldLabel="Start 1" 
                                            LabelWidth="60" 
                                            MinTime="08:30" 
                                            MaxTime="18:30" 
                                            Increment="15"
                                            Vtype="daterange" 
                                            LabelPad="2"
                                            Width="135">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="endDateField" Value="TimeFieldEnd1" Mode="Value" />
                                        </CustomConfig>
                                        <Listeners>
                                            <KeyUp Fn="onKeyUp" />
                                        </Listeners>
                                    </ext:TimeField>
                                    <ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
                                    <ext:TimeField ID="TimeFieldEnd1" runat="server" 
                                            FieldLabel="End 1" 
                                            LabelWidth="60"
                                            MinTime="08:30" 
                                            MaxTime="18:30"
                                            Increment="15"
                                            Vtype="daterange" 
                                            LabelPad="2"
                                            Width="135">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="startDateField" Value="TimeFieldStart1" Mode="Value" />
                                        </CustomConfig>
                                        <Listeners>
                                            <KeyUp Fn="onKeyUp" />
                                        </Listeners>
                                    </ext:TimeField>
                                </Items>
                            </ext:FieldContainer>
    
                            <ext:FieldContainer ID="FieldContainer2" runat="server" 
                                    FieldLabel="Range 08.15 -> 18.45" 
                                    AnchorHorizontal="100%" 
                                    Layout="HBoxLayout">
                                <Items>
                                    <ext:TimeField ID="TimeFieldStart2" runat="server" 
                                            FieldLabel="Start 2"
                                            LabelWidth="60"
                                            MinTime="08:15" 
                                            MaxTime="18:45"
                                            Increment="15"
                                            Vtype="daterange" 
                                            LabelPad="2"
                                            Width="135">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="endDateField" Value="TimeFieldEnd2" Mode="Value" />
                                        </CustomConfig>
                                        <Listeners>
                                            <KeyUp Fn="onKeyUp" />
                                        </Listeners>
                                    </ext:TimeField>
                                    <ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
                                    <ext:TimeField ID="TimeFieldEnd2" runat="server" 
                                            FieldLabel="End 2" 
                                            LabelWidth="60"
                                            MinTime="08:15" 
                                            MaxTime="18:45"
                                            Increment="15"
                                            Vtype="daterange" 
                                            LabelPad="2"
                                            Width="135">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="startDateField" Value="TimeFieldStart2" Mode="Value" />
                                        </CustomConfig>
                                        <Listeners>
                                            <KeyUp Fn="onKeyUp" />
                                        </Listeners>
                                    </ext:TimeField>
                                </Items>
                            </ext:FieldContainer>
    
                            <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"
                                            LabelWidth="60"
                                            MinTime="19:00"
                                            MaxTime="07:00"
                                            LabelPad="2"
                                            Width="135" ValidateOnBlur="false" ValidateOnChange="false">
                                    </ext:TimeField>
                                    <ext:DisplayField runat="server" Width="23" Html="&nbsp;" />
                                    <ext:TimeField ID="TimeFieldEnd3" runat="server" 
                                            FieldLabel="End 3"  
                                            LabelWidth="60"
                                        MinTime="19:00"
                                            MaxTime="07:00"
                                            LabelPad="2"
                                            Width="135" ValidateOnBlur="false" ValidateOnChange="false">
                                    </ext:TimeField>
                                </Items>
                            </ext:FieldContainer>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    I accept suggestions ideas or comments

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

    I wanna know if it’s possible to manage/validate next interval ”19.00 -> 07.00”
    I see... you would like to set "19:00" in a start TimeField and "07.00" in an end TimeField. I am afraid it is not possible. At least, with Vtype="daterange". Actually, I am quite surprised Vtype="daterange" works for TimeFields. It was designed for DateFields only and was not tested with TimeFields at all. I've never seen it is used for TimeFields. But you do you and it appears to be working.

    I think you could choose "19:00" in a start TimeField and "07:00" in an end TimeField only if remove Vtype="daterange".

    additionally I need to know how to applicate KeyUp function.
    These settings should be enough.
    <ext:TimeField ... EnableKeyEvents="true">
        <Listeners>
            <KeyUp Fn="onKeyUp" />
        </Listeners>
    </ext:TimeField>
  3. #3
    Hi Daniil

    Thanks for your reply, I implemented your suggestion, but the result of this correction is a empty list or disabled control

    I corrected the original code form the post, to avoid redundancy of information

    I accept suggestions ideas or comments

    Regards.
  4. #4
    Hello @OpenDat2000

    You can add this to the same script tag where you define your onKeyUp function:
            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();
                }
            });
    Pretty sure this is what you want. The list is still ordered, so you'll have it beginning from 00:00 up to 07:00, then jumping straight to 19:00 until 23:45. Said all in 24-hour format. Your example will display in 12-hour format so 12am to 7am jump 7pm to 11:45pm.

    About the KeyUp event, it seems not to be triggered here. Did it trigger for you? I've just changed the event to 'Change' as the time is meant to be changed both via keyboard (which should rise the event) and by point-and-clicking with the mouse (which should NOT trigger the onKeyUp event).

    iow:
    <Listeners>
        <Change Fn="onKeyUp" />
    </Listeners>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,

    Thanks for your reply, I implemented your suggestion, the time list is build correctly, but when the hour range 19:00 - 07:00 is selected, it displays a warning about the min or max date.
    How I can delete the range validation?

    I corrected the original code form the post, to avoid redundancy of information

    I accept suggestions ideas or comments.

    Regards.
    Last edited by opendat2000; Sep 04, 2015 at 2:22 PM.
  6. #6
    Hello @opendat2000!

    Then now you get to have a validation compatible to the new rule. This can be attained with this override:
    Ext.define("Ext.form.field.TimeOverride", {
                override: "Ext.form.field.Time",
                betweenText: "The time in this field must NOT be between {0} and {1}",
                getErrors: function (value) {
                    var me = this,
                        format = Ext.String.format,
                        errors = me.callSuper(arguments),
                        minValue = me.minValue,
                        maxValue = me.maxValue,
                        date;
    
                    value = me.formatDate(value || me.processRawValue(me.getRawValue()));
    
                    if (value === null || value.length < 1) {
                        return errors;
                    }
    
                    date = me.parseDate(value);
                    if (!date) {
                        errors.push(format(me.invalidText, value, Ext.Date.unescapeFormat(me.format)));
                        return errors;
                    }
    
                    // if minValue and maxValue are specified and minValue is after maxValue (night shift, for example)
                    if (minValue && maxValue && (minValue > maxValue)) {
                        if (date < minValue && date > maxValue) { // if between the non-time shift
                            errors.push(format(me.betweenText, me.formatDate(maxValue), me.formatDate(minValue)));
                        }
                    } else { // normal/original test
                        if (minValue && date < minValue) {
                            errors.push(format(me.minText, me.formatDate(minValue)));
                        }
                        if (maxValue && date > maxValue) {
                            errors.push(format(me.maxText, me.formatDate(maxValue)));
                        }
                    }
    
                    return errors;
                }
            });
    Notice the introduction of a string that will most definitely not be supported by native Ext.NET/ExtJS locales so, if you are going to support other languages not english, you should introduce the locale string accordingly (and that would be another topic).

    You'd also need to implement a validation on change to estimate if the start field is concise with the end field, as you did to the fields above. Of course, taking care with the later times meaning "before" the earlier times.

    I hope this helps! Sorry for overlooking the validation.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Ops! Sorry again, you just wanted to remove validation!..

    Either remove lines 26, 27 and 28 from the override I provided you, adding in place return errors;.

    Or simply add ValidateOnBlur="false" ValidateOnChange="false" to each timeField definitions.

    First option will remove validation from any timefield you set with minTime > maxTime. Second option lets you choose which fields you want to skip validation.

    EDIT: reviewed alternative to edit override so validation is not disabled on all the TimeFields.
    Last edited by fabricio.murta; Sep 04, 2015 at 7:16 PM.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hi Fabricio,

    Thanks a lot for your reply, the ValidateOnBlur="false" and ValidateOnChange="false" worked perfectly.

    Please close the thread.

    Note: I modified the code, to provide in the community.

Similar Threads

  1. [CLOSED] Timepicker maxtime cause problem
    By Fergus in forum 2.x Premium Help
    Replies: 3
    Last Post: Oct 08, 2013, 3:18 PM
  2. Replies: 4
    Last Post: Sep 04, 2013, 8:27 AM
  3. Date Range in a user control
    By Vinci in forum 2.x Help
    Replies: 6
    Last Post: Jun 28, 2013, 4:49 AM
  4. How to apply a theme to <ext:Label /> control?
    By vadym.f in forum 1.x Help
    Replies: 2
    Last Post: Jan 17, 2012, 1:03 PM
  5. How to set the time range in calender panel control.
    By PrasadJoshi in forum 1.x Help
    Replies: 1
    Last Post: Dec 21, 2010, 11:09 AM

Posting Permissions