[CLOSED] Cascading TimeFields with at least 30 Minutes between

  1. #1

    [CLOSED] Cascading TimeFields with at least 30 Minutes between

    Hi,

    I have an implementation of cascading timefields like this:

     <ext:Panel ID="PanelBookingDateStart" runat="server" BodyStyle="padding-right: 10px;"
                                                                Height="40" Layout="Form" Border="false" LabelWidth="80" Width="200">
                                                                <Content>
                                                                    <ext:TimeField ID="timeFieldStart" runat="server" FieldLabel="Start" Width="90" Vtype="daterange">
                                                                        <DirectEvents>
                                                                            <Select OnEvent="TimeSelected">
                                                                                <ExtraParams>
                                                                                    <ext:Parameter Name="SENDER" Value="start" />
                                                                                </ExtraParams>
                                                                            </Select>
                                                                        </DirectEvents>
                                                                        <CustomConfig>
                                                                            <ext:ConfigItem Name="select" Value="select" />
                                                                            <ext:ConfigItem Name="endDateField" Value="#{timeFieldEnd}" Mode="Value" />
                                                                        </CustomConfig>
                                                                    </ext:TimeField>
                                                                </Content>
                                                            </ext:Panel>
                                                            <ext:Panel ID="PanelBookingDateEnd" BodyStyle="padding-right: 10px;" runat="server"
                                                                Height="40" Layout="Form" Border="false" LabelWidth="80" Width="200">
                                                                <Content>
                                                                    <ext:TimeField ID="timeFieldEnd" runat="server" NoteAlign="Down" Note=" " FieldLabel="Ende"
                                                                        Width="90" Vtype="daterange">
                                                                        <DirectEvents>
                                                                            <Select OnEvent="TimeSelected">
                                                                                <ExtraParams>
                                                                                    <ext:Parameter Name="SENDER" Value="end" />
                                                                                </ExtraParams>
                                                                            </Select>
                                                                        </DirectEvents>
                                                                        <CustomConfig>
                                                                            <ext:ConfigItem Name="select" Value="select" />
                                                                            <ext:ConfigItem Name="startDateField" Value="#{timeFieldStart}" Mode="Value" />
                                                                        </CustomConfig>
                                                                    </ext:TimeField>
                                                                </Content>
                                                            </ext:Panel>


    If I select timeFieldStart, then the min value of timeFieldEnd is set to the value of timeFieldStart vice versa.

    This works fine. But now I always want 30 Minutes between both. Means that the selected Time Range should be at least 30 Minutes.

    I was thinking about something like (pseudo!)

     <ext:ConfigItem Name="endDateField" Value="#{timeFieldEnd}.add(30, Date.MINUTE)" Mode="Value" />


    Regards,

    Martin
  2. #2

    RE: [CLOSED] Cascading TimeFields with at least 30 Minutes between

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title></title>
        
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        
        <script type="text/javascript">
            Ext.apply(Ext.form.VTypes, {
                timerange : function (val, field) {
                    var date = field.parseDate(val);
    
                    if (!date) {
                        return;
                    }
                    
                    if (field.startDateField &amp;&amp; (!field.dateRangeMax || (date.getTime() <= field.dateRangeMax.getTime()))) {
                        var start = Ext.getCmp(field.startDateField);
                        if(start){
                            date = new Date(date.getTime() - 30*60000);
                            start.setMaxValue(date);
                            field.dateRangeMax = date;
                            start.validate();                
                        }
                    } else if (field.endDateField &amp;&amp; (!field.dateRangeMin || (date.getTime() >= field.dateRangeMin.getTime()))) {
                        var end = Ext.getCmp(field.endDateField);
                        if(end){
                            date = new Date(date.getTime() + 30*60000);
                            end.setMinValue(date);
                            field.dateRangeMin = date;
                            end.validate();                
                        }
                    }
    
                    return true;
                }
            });
        </script>
    
        
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
            
             <ext:Panel ID="PanelBookingDateStart" runat="server" BodyStyle="padding-right: 10px;"
                    Height="40" Layout="Form" Border="false" LabelWidth="80" Width="200">
                    <Content>
                        <ext:TimeField ID="timeFieldStart" runat="server" FieldLabel="Start" Width="90" Vtype="timerange">
                            
                            <CustomConfig>
                                <ext:ConfigItem Name="endDateField" Value="#{timeFieldEnd}" Mode="Value" />
                            </CustomConfig>
                        </ext:TimeField>
                    </Content>
                </ext:Panel>
                <ext:Panel ID="PanelBookingDateEnd" BodyStyle="padding-right: 10px;" runat="server"
                    Height="40" Layout="Form" Border="false" LabelWidth="80" Width="200">
                    <Content>
                        <ext:TimeField ID="timeFieldEnd" runat="server" NoteAlign="Down" Note=" " FieldLabel="Ende"
                            Width="90" Vtype="timerange">
                         
                            <CustomConfig>
                                <ext:ConfigItem Name="startDateField" Value="#{timeFieldStart}" Mode="Value" />
                            </CustomConfig>
                        </ext:TimeField>
                    </Content>
                </ext:Panel>
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Cascading TimeFields with at least 30 Minutes between

    Hi,

    thanks for the solution. It looks nice but does not work 100%.

    I cannot select a different starttime more than 2 times.

    Szenario:

    - chose 3:00 starttime
    - chose 5:00 endtime
    - chose 4:30 starttime
    - chose 9:00 endtime
    - chose 8:00 starttime (=> not possible! only 4:30 is possible).

    But until now I did not find out why this happens. Any idea?



    Regards,

    Martin
  4. #4

    RE: [CLOSED] Cascading TimeFields with at least 30 Minutes between

    Hi,

    Try the following modified sample
    
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title></title>
        
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        
        <script type="text/javascript">
            Ext.apply(Ext.form.VTypes, {
                timerange : function (val, field) {
                    var date = field.parseDate(val);
    
                    if (!date || field.timerangevalidation) {
                        return;
                    }
                    
                    if (field.startDateField) {
                        var start = Ext.getCmp(field.startDateField);
                        if(start){
                            date = new Date(date.getTime() - 30*60000);
                            start.setMaxValue(date);
                            start.timerangevalidation = true;
                            start.validate();                
                            start.timerangevalidation = false;
                        }
                    } else if (field.endDateField) {
                        var end = Ext.getCmp(field.endDateField);
                        if(end){
                            date = new Date(date.getTime() + 30*60000);
                            end.setMinValue(date);
                            end.timerangevalidation = true;
                            end.validate();                
                            end.timerangevalidation = false;
                        }
                    }
    
                    return true;
                }
            });
        </script>
    
        
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
            
             <ext:Panel ID="PanelBookingDateStart" runat="server" BodyStyle="padding-right: 10px;"
                    Height="40" Layout="Form" Border="false" LabelWidth="80" Width="200">
                    <Content>
                        <ext:TimeField ID="timeFieldStart" runat="server" FieldLabel="Start" Width="90" Vtype="timerange">
                            
                            <CustomConfig>
                                <ext:ConfigItem Name="endDateField" Value="#{timeFieldEnd}" Mode="Value" />
                            </CustomConfig>
                        </ext:TimeField>
                    </Content>
                </ext:Panel>
                <ext:Panel ID="PanelBookingDateEnd" BodyStyle="padding-right: 10px;" runat="server"
                    Height="40" Layout="Form" Border="false" LabelWidth="80" Width="200">
                    <Content>
                        <ext:TimeField ID="timeFieldEnd" runat="server" NoteAlign="Down" Note=" " FieldLabel="Ende"
                            Width="90" Vtype="timerange">
                         
                            <CustomConfig>
                                <ext:ConfigItem Name="startDateField" Value="#{timeFieldStart}" Mode="Value" />
                            </CustomConfig>
                        </ext:TimeField>
                    </Content>
                </ext:Panel>
        </form>
    </body>
    </html>
  5. #5

    RE: [CLOSED] Cascading TimeFields with at least 30 Minutes between

    Yes this works fine. Solved! :-)

Similar Threads

  1. [CLOSED] Where is the example located for cascading dropdown??
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 10, 2012, 1:03 PM
  2. [CLOSED] [MVC] Cascading multi Partial views
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: May 10, 2012, 2:10 PM
  3. Compare values from 2 TimeFields
    By AlexMaslakov in forum 1.x Help
    Replies: 5
    Last Post: Sep 14, 2011, 1:08 PM
  4. [CLOSED] TimeFields problem with 12-hour clock
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 13, 2009, 7:39 PM
  5. [CLOSED] Can't get three cascading comboboxes to work
    By harafeh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 13, 2009, 1:58 PM

Posting Permissions