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

**opendat2000** · Sep 01, 2015, 2:20 PM

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.

**Daniil** · Sep 01, 2015, 10:48 PM

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>

**opendat2000** · Sep 02, 2015, 1:50 PM

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.

**fabricio.murta** · Sep 03, 2015, 10:48 PM

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!

**opendat2000** · Sep 04, 2015, 1:02 PM

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.

**fabricio.murta** · Sep 04, 2015, 6:08 PM

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.

**fabricio.murta** · Sep 04, 2015, 6:12 PM

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.

**opendat2000** · Sep 07, 2015, 12:01 PM

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.

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

Thread Tools

Search Thread

Display

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

Similar Threads

[CLOSED] Timepicker maxtime cause problem

[CLOSED] How to write a datetime composite control which combine DateField and TimeField control

Date Range in a user control

How to apply a theme to <ext:Label /> control?

How to set the time range in calender panel control.

Posting Permissions

Sitemap

Downloads

Resources

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

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

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us