[CLOSED] Cascading TimeFields with at least 30 Minutes between

Hi,

I have an implementation of cascading timefields like this:

Code:

---

<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!)

Code:

---

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

---

Regards,

Martin

Hi,

Please see the following sample

Code:

---

<%@ 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>

---

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

Hi,

Try the following modified sample

Code:

---


<%@ 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>

---

Yes this works fine. Solved! :-)